Firebase V9实现Firestore集合转对象数组（React项目）

Firebase V9采用模块化API，和之前的命名空间写法差异较大，下面是两种常用的实现方式：

一次性获取集合数据 #

适合只需要加载一次数据的场景，比如页面初始化时获取列表：

import { collection, getDocs, getFirestore } from "firebase/firestore";
import { initializeApp } from "firebase/app";

// 初始化Firebase（如果还没配置的话）
const firebaseConfig = {
  // 填入你的项目配置信息
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// 封装转换函数
async function getCollectionAsArray(colName) {
  try {
    const colRef = collection(db, colName);
    const querySnapshot = await getDocs(colRef);
    // 遍历文档快照，合并文档ID与数据成完整对象
    const docsArray = querySnapshot.docs.map(doc => ({
      id: doc.id,
      ...doc.data()
    }));
    return docsArray;
  } catch (error) {
    console.error("获取集合数据失败:", error);
    return [];
  }
}

// 在React组件中调用示例（比如useEffect钩子）
// useEffect(() => {
//   getCollectionAsArray("your-collection-name").then(arr => {
//     console.log(arr);
//     // 将数组存入组件state
//   });
// }, []);

实时监听集合变化 #

如果需要数据实时同步（文档新增/修改/删除时自动更新数组），用onSnapshot实现：

import { collection, onSnapshot, getFirestore } from "firebase/firestore";
import { useState, useEffect } from "react";

function YourComponent() {
  const [docsArray, setDocsArray] = useState([]);
  const db = getFirestore();

  useEffect(() => {
    const colRef = collection(db, "your-collection-name");
    // 监听集合变化
    const unsubscribe = onSnapshot(colRef, (querySnapshot) => {
      const updatedArray = querySnapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
      setDocsArray(updatedArray);
    }, (error) => {
      console.error("监听集合失败:", error);
    });

    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe();
  }, []);

  return (
    <div>
      {/* 渲染数组内容 */}
      {docsArray.map(item => (
        <div key={item.id}>{item.your-field-name}</div>
      ))}
    </div>
  );
}

关键注意点 #

• 必须手动把doc.id合并到对象中，Firestore文档ID不会包含在doc.data()返回的结果里
• 所有Firebase V9 API都需要从对应模块单独导入，不能再使用旧版的firebase.firestore()写法
• 实时监听场景下，务必在组件卸载时取消订阅

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