React接入Firebase时出现ae.collection is not a function报错如何解决

• 你使用的是Firebase v9及以上的模块化版本SDK，该版本已废弃v8及之前db.collection()这类链式调用的命名空间API，改为独立函数调用模式，旧写法自然会报方法不存在的错误。
• 你当前引入的是firebase/firestore/lite轻量版Firestore SDK，该版本本身不支持onSnapshot实时监听API，仅支持一次性拉取数据的getDocs等基础方法。

方案1：需要实时监听数据更新 #

1. 先修改firebase.js的导入配置，将轻量版Firestore替换为完整版，并导出需要用到的API：

// 替换原来的lite导入为完整版，新增导出onSnapshot
import { getFirestore, collection, getDocs, onSnapshot } from 'firebase/firestore';

// 原有配置不变
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

export const db = getFirestore(app);
export { collection, getDocs, onSnapshot };

2. 修改组件代码，改用模块化API调用，同时把逻辑放到useEffect中避免重复执行，添加卸载时的监听清理逻辑：

import { useState, useEffect } from "react";
import { db, collection, onSnapshot } from '../../../firebase.js';

const YourComponent = () => {
  const [holder, setHolder] = useState([]);

  useEffect(() => {
    // 调用collection函数获取集合引用
    const holderCollection = collection(db, "holder");
    // 开启实时监听，拿到取消监听的方法
    const unsubscribe = onSnapshot(holderCollection, (snapshot) => {
      setHolder(
        snapshot.docs.map((doc) => ({
          id: doc.id,
          data: doc.data(),
        }))
      );
    });
    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe();
  }, []);

  console.log({ holder });

  // 剩余组件渲染逻辑
  return <div>{/* 你的渲染代码 */}</div>
}

方案2：不需要实时监听，仅一次性拉取数据 #

可以保留轻量版Firestore SDK，修改组件代码用getDocs拉取数据即可：

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

const YourComponent = () => {
  const [holder, setHolder] = useState([]);

  useEffect(() => {
    const fetchHolderData = async () => {
      const holderCollection = collection(db, "holder");
      const snapshot = await getDocs(holderCollection);
      setHolder(
        snapshot.docs.map((doc) => ({
          id: doc.id,
          data: doc.data(),
        }))
      );
    };
    fetchHolderData();
  }, []);

  console.log({ holder });

  // 剩余组件渲染逻辑
  return <div>{/* 你的渲染代码 */}</div>
}

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