如何獲取 firestore 集合中的所有文檔？

Question

我正在嘗試獲取我的集合中的所有文檔，但日志返回一個空數組，並且我收到一條錯誤消息，指出無法讀取未定義讀取的屬性 forEach。 我已經按照文檔進行操作，但找不到問題出在哪里。 有人可以幫忙嗎？ 下面的代碼片段是我在我的 index.js 中使用它的自定義掛鈎，如下所示。 此日志返回一個空數組。

const { docs } = useFireStore('barbers')
    console.log('docs',docs)

import { useState, useEffect } from "react";
import { collection, getDocs, querySnapshot } from "firebase/firestore"; 
import {db} from '../../../base'
export const  useFireStore = (mycollection) => {
   
    const [docs, setdocs] = useState([])

    useEffect(() => {
    
    const  unsub = async () => {

        await getDocs(collection(db,mycollection))
        querySnapshot.forEach((doc) => {
            let document =[];
            // doc.data() is never undefined for query doc snapshots
            document.push({...doc.data() ,id: doc.id});
            //console.log(doc.id, " => ", doc.data());
          });
          setdocs(document);
    } 

    
      return () => unsub();
       
      
    }, [mycollection])
    
    return { docs };
  
}

Answer 1

如果我沒記錯的話，查詢快照是您調用getDocs時等待的返回值。 您還每次在forEach回調中重新聲明document數組，它應該在循環外聲明，連同setDocs state 更新程序 function。

export const  useFireStore = (mycollection) => {
  const [docs, setDocs] = useState([]);

  useEffect(() => {\
    const  unsubscribe = async () => {
      const querySnapshot = await getDocs(collection(db,mycollection));

      const document =[];
      querySnapshot.forEach((doc) => {
        document.push({
          ...doc.data(),
          id: doc.id
        });
      });
      setdocs(document);
    }
    
    return unsubscribe;
  }, [mycollection]);
    
  return { docs };
}

Answer 2

Drew 的回答為您提供了一次文件，所以。

但是，如果您想監聽文檔的更新，並在您的 UI 中顯示這些更新，請使用onSnapshot而不是getDocs ：

export const useFireStore = (mycollection) => {
  const [docs, setdocs] = useState([])

  useEffect(() => {
    const unsub = onSnapshot(collection(db, mycollection), (querySnapshot) => {
      const documents = querySnapshot.docs.map((doc) => {
        return {
          ...doc.data(),
          id: doc.id
        }
      });
      setdocs(documents);
    });
    return () => unsub();
  }, [mycollection])
}

這個：

• 使用onSnapshot而不是getDocs ，這樣您還可以監聽數據的更新。
• 不再返回docs state 變量，因為這似乎容易出錯。
• 現在正確返回取消訂閱onSnapshot偵聽器的 function。