React使用Firestore v9报错db.collection is not a function如何解决

报错原因 #

你使用的是Firebase 9+版本的模块化SDK，该版本废弃了旧版db.collection()链式调用的命名空间语法，所有Firestore操作都需要通过导入独立函数实现。

修改步骤 #

• 第一步：在Feed.js文件中导入需要用到的Firestore方法

// 原有db导入保留，新增以下两个方法导入
import { collection, onSnapshot } from 'firebase/firestore';
import { db } from './firebase';

• 第二步：修改useEffect内的实时监听逻辑，替换为模块化写法

useEffect(() => {
  // 生成posts集合引用
  const postsCollectionRef = collection(db, 'posts');
  // 注册快照监听，返回取消监听函数
  const unsubscribe = onSnapshot(postsCollectionRef, snapshot => {
    setPosts(snapshot.docs.map(doc => ({
      id: doc.id,
      data: doc.data()
    })))
  });
  // 组件卸载时取消监听，避免内存泄漏
  return () => unsubscribe();
}, [])

可选兼容方案 #

如果需要临时沿用旧版链式调用写法，可以切换为compat版本的SDK（不推荐长期使用，模块化版本树摇后打包体积更小）：

// firebase.js兼容写法
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';

const app = firebase.initializeApp(firebaseConfig);
const db = app.firestore();
export { db };

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