React中读取Firebase集合数据仅获单条，求技术协助

你的代码目前只能获取单条数据，是因为用了doc()和getDoc()——这两个方法是专门用来读取单个文档的。要读取整个集合的所有数据，得用collection()和getDocs()方法，下面是具体实现：

基础集合读取代码 #

async function fetchIncomeCollection() {
  // 指向目标嵌套集合的引用，路径对应你Firebase里的层级
  const collectionRef = collection(db, "transactions/yaounde/income");
  // 获取集合下所有文档的快照
  const querySnapshot = await getDocs(collectionRef);
  
  // 遍历快照，提取每个文档的数据（可同时带上文档ID）
  const incomeList = [];
  querySnapshot.forEach((doc) => {
    incomeList.push({ id: doc.id, ...doc.data() });
  });
  
  console.log("集合全部数据:", incomeList);
  return incomeList;
}

// 调用函数，记得捕获错误
fetchIncomeCollection().catch(err => console.error("读取集合出错:", err));

关于缩短路径返回undefined的问题 #

缩短路径后得到undefined，多半是因为路径没有对应到Firebase里的有效资源：

• 要严格对应控制台里的层级结构，比如transactions/yaounde/income是「集合transactions → 文档yaounde → 集合income」的嵌套结构，少一段或者多一段都会导致找不到资源。
• 可以去Firebase控制台确认路径的每一段是否存在，确保没有拼写错误。

React组件中整合的示例 #

如果要在React组件里使用，结合状态管理和生命周期钩子的写法如下：

import { useState, useEffect } from 'react';
import { collection, getDocs } from "firebase/firestore";
import { db } from './firebaseConfig'; // 导入你的Firebase配置

function IncomeRecords() {
  const [records, setRecords] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [fetchError, setFetchError] = useState(null);

  useEffect(() => {
    const loadRecords = async () => {
      try {
        const colRef = collection(db, "transactions/yaounde/income");
        const snapshot = await getDocs(colRef);
        // 把快照转成数组格式
        const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
        setRecords(data);
      } catch (err) {
        setFetchError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    loadRecords();
  }, []);

  if (isLoading) return <div>加载数据中...</div>;
  if (fetchError) return <div>读取失败: {fetchError}</div>;

  return (
    <div className="records-container">
      <h3>收入记录</h3>
      {records.map(record => (
        <div key={record.id} className="record-item">
          <p>项目: {record.title}</p>
          <p>金额: {record.amount}</p>
        </div>
      ))}
    </div>
  );
}

export default IncomeRecords;

内容的提问来源于stack exchange，提问作者JLCoder