如何访问promise firestore返回的值？

Question

我正在尝试访问秒napshot.data（）返回的内容，但有一个问题，如下面的评论所述。我试图创建一个异步函数，但无济于事。知道出了什么问题吗？请查看2条评论。

  useEffect(() => {
    firestore.collection(`comments`).onSnapshot((snapshot) => {
      const posts = snapshot.docs
        .map((doc) => {
          const address = doc.data().comments?.map((comment) => {
            comment.get().then((secondSnapshot) => {
              console.log("snapshot", secondSnapshot.data());

              #I SEE WHAT I EXPECT TO SEE

              return secondSnapshot.data();
            });
          });
          console.log(address) #THIS RETURNS UNDEFINED FOR SOME REASON??

          return {
            username: doc.data().username,
            date: doc.data().date.seconds,
            text: doc.data().text,
            votes: doc.data().votes,
            comments: [],
          };
        });
      props.setComments(posts);
    });
  }, [location]);

Answer 1

除了@Mulan指出的React vs Firebase设计问题外，您的代码还有几个问题。

下面的map函数不返回任何内容。如果你不从这个街区返回一些东西，你将在地址中找不到任何东西。

const address = doc.data().comments?.map((comment) => {
/* This MUST return something */
});

您正在混合同步和异步代码。基本上，您尝试在对注释进行不同的异步调用之前打印地址值。get（）已完成运行。

const address = doc.data().comments?.map((comment) => {
/* async code inside */
});
console.log(address); // this runs without waiting for the async code

如果您对旧的Promise语法感到困难，请尝试使用async/wait代替：

firestore.collection(`comments`).onSnapshot(async (snapshot) => {
    const postPromises = snapshot.docs
        .map(async (doc) => {
            const comments = doc.data().comments ?? []; // assign an empty array if there are no comments
            const secondSnapshots = await Promise.all(comments.map((comment) => comment.get()));
            const addresses = secondSnapshots.map((secondSnapshot) => secondSnapshot.data());
            console.log(addresses);
            return { /* ... */ };
        });
    const posts = await Promise.all(postPromises);
    props.setComments(posts);
});

我不确定你是否应该打电话给comment。get（）在快照中，但这是另一个故事，我不是Firebase专家。