如何访问 promise 火库返回的值？

Question

我正在尝试访问 secondSnapshot.data() 返回的内容，但遇到了问题，如下面的评论所述。 我试图创建一个异步 function，但无济于事。 知道出了什么问题吗？ 请查看 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 设计问题之外，您的代码还有几个问题。

问题 #1

以下 map function 不返回任何内容。 如果您不从该块返回某些内容，您将不会在地址中找到任何内容。

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

问题 #2

您正在混合同步和异步代码。 基本上，您尝试在对comment.get()的不同异步调用完成运行之前打印地址值。

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

建议

如果您在使用旧的 promise 语法时遇到困难，请尝试使用 async / await 代替：

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);
});

我不确定您是否应该在onSnapshot中调用comment.get() ，但这是另一回事，我不是 Firebase 专家。