ReactJS，Firebase - Firestore，子集合的动态读取问题

Question

我是一名初级开发人员，目前正在使用 ReactJS 和 Firebase 完成一个论坛。

我在动态读取子集合时遇到问题。

这是我的 Firestore 的屏幕截图。

每个主题都有一个主题文档和一个帖子集合（以及子集合）。

我尝试了很多方法来动态地从子集合中检索数据，但都没有奏效。一直在 stackoverflow 中潜水，在文章中，但我被卡住了。 主题查询运行良好，帖子也运行良好，但不是动态的。 如果您能提供帮助，我将非常感激，因为寻找解决方案已经持续了一段时间，所以提前谢谢您。

这些是我的导入：

import firebase from 'firebase';
import * as admin from 'firebase-admin';
import * as functions from 'firebase-functions';

在单独的文件中有firebaseConfig，并且firebase也被初始化了。

这些是查询：

const db = firebase.firestore();
const dbPostsCollection = db.collection("topics");

const [data, setData] = useState([]);

我的第一个也是主要查询，它使我最接近我想要的结果，但无法检索数据。

 useEffect(() => {
    dbPostsCollection.get().then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            console.log(doc.id, " => ", doc.data());
            console.log(doc.id, " => ", db.collection("posts"));
        });
    });    
}, []);

没有错误，下面是console.logs的截图

第二次查询：

useEffect(() => { 
    dbPostsCollection
    .get()
    .then(function (Document) {
       Document.forEach((subCollectionSnapshot) => {
            const postsData = subCollectionSnapshot.map(subcollection =>               
                subcollection.data())
                console.log(postsData); // array of posts objects
                setData(postsData);
            });
        }
        );
}, []);

错误信息：Unhandled Rejection (TypeError): subCollectionSnapshot.map is not a function

最后一个查询（超过 3 个，但我会让你免于阅读我所有的试验）：

useEffect(() => {
    dbPostsCollection
    .get()
    .then((querySnapshot) => {  
        querySnapshot.forEach((doc) => {
            console.log(doc.id, " => ", doc.data());
            console.log(doc.id, " => ", db.collection("posts").get().then(querySnapshot => {
                const data = querySnapshot.docs.map(doc => doc.data());
                console.log(data);
            }));
        })
    }); 
}, []);

这个查询没有返回 Promise 结果，结果是未定义的。 再次感谢您的帮助！

Answer 1

useEffect() 根据定义和要求是 SYNCHRONOUS 函数，而 Firestore 操作是ASYNCHRONOUS - 您的 useEffect() 可能在任何 Firestore 活动发生之前就退出了。 p>

一种常见的技巧是在useEffect() 内创建一个自动执行的闭包，以有效地“生成”一个线程：

useEffect(() => {
  (async () => {
    await dbPostsCollection
    .get()
    .then((querySnapshot) => {  
        querySnapshot.forEach((doc) => {
            console.log(doc.id, " => ", doc.data());
            console.log(doc.id, " => ", db.collection("posts").get().then(querySnapshot => {
                const data = querySnapshot.docs.map(doc => doc.data());
                console.log(data);
            }));
        })
    });
  })(); 
}, []);

(async () => {}) 返回匿名 ARROW FUNCTION； await 表示等待下面的命令执行（有效地等待隐含的 Promise 解决）；以下() 执行它。箭头函数返回一个Promise，useEffect 几乎忽略了它，但函数确实运行到完成。