渲染数组的嵌套对象值反应

Question

以下是我的 savedLinksData 数组在控制台中的打印方式：

这是我尝试获取 linkType 值的代码：

  {savedLinksData.map((saved) => {
        return <h1>{saved.linkType}</h1>;
      })}

我做错了什么？

我认为我在数组中存储值的方式可能有问题。看起来值不在数组内。

console.log("----->", saved) 的图片

const [savedLinksData, setSavedLinksData] = useState([]);

  // query for saved links data
  useEffect(() => {
    if (user) {
      async function fetchData() {
        const request = await db
          .collection("users")
          .doc(user)
          .collection("saved")
          .onSnapshot((snapshot) =>
            setSavedLinks(
              snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id }))
            )
          );
      }
      fetchData();
    } else {
      setSavedLinks([]);
    }
  }, [user]);

  useEffect(() => {
    if (savedLinks.length > 0) {
      let newArray = [];
      savedLinks.map((saved) => {
        db.collection("users")
          .doc(saved.savedUser)
          .collection("links")
          .doc(saved.savedLinkId)
          .get()
          .then(function (doc) {
            if (doc.exists) {
              // console.log("Document data:", doc.data());
              newArray.push(doc.data());
              // setSavedLinksData([...savedLinksData, doc.data()]);
            } else {
              // doc.data() will be undefined in this case
              console.log("No such document!");
            }
          })
          .catch(function (error) {
            console.log("Error getting document:", error);
          });
      });
      setSavedLinksData(newArray);
    }
  }, [savedLinks]);