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()根據定義和要求是同步的 function，而 Firestore 操作是異步的 - 可能您的useEffect()在任何 Firestore 活動發生之前退出。

一個常見的 hack 是在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 解析）； 下面的()執行它。 箭頭 function 返回Promise ， useEffect 幾乎忽略它，但 function確實運行完成。