我如何在 useEffect 掛鈎中從 firestore 數據庫獲取 map 數據

Question

我正在嘗試從 firestore 數據庫中獲取一些數據並將其保存到一個數組中進行反應。 這是我的代碼。

    const readDocuments = async () => {          
        const allData = await getDocs(collectionRef);
        //console.log(allData);
        // allData.forEach((doc) => {
        //     console.log(doc.id, " => ", doc.data());
        // });
        setData(allData.docs.map((doc) => ({
            ...doc.data(), id: doc.id
        })))
        console.log(data);
        //return allData;
    };

當我檢查控制台時，這就是我得到的。

不太確定我在這里做錯了什么。 我在教程中看到了幾乎相同的方法。 如果我取消注釋 function 中的 foreach 循環，它會正確輸出數據，所以我認為這不是實際檢索信息的問題。

編輯：上面的 function 嵌套在 useEffect 掛鈎中。

Answer 1

import { useEffect, useState } from "react";
import { collection, getDocs } from "firebase/firestore";
import { db } from "../firebase/config";

const useGetDocs = (collectionName) => {
    const [documents, setDocuments] = useState([]);

    //Firebase Collection Reference
    const postCollectionRef = collection(db, collectionName);

    useEffect(() => {
        const getDocuments = async () => {
            const data = await getDocs(postCollectionRef);
            setDocuments(data.docs.map((doc) => ({...doc.data(), id: doc.id})));
        };

        getDocuments();
    }, []);

    return { documents };
}
 
export default useGetDocs;

這是我使用的完整文件，現在可以使用了。 不一定確定之前出了什么問題，但我所做的主要更改是使用“use”關鍵字將其創建為自定義掛鈎，這可能與它有關。 我無論如何都不是專家，仍然可能做錯事，但希望這對遇到類似問題的人有所幫助。

干杯!

Answer 2

如果您查看文檔，他們會向您展示具體操作方法。

import { collection, query, where, getDocs } from "firebase/firestore";

const q = query(collection(db, "cities"), where("capital", "==", true));

const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
});