React+Firebase项目报collection is not a function错误求助

你正在使用 Firebase 9+ 模块化版本SDK，该版本已废弃旧版的链式调用API，你尝试的两种解决方案均为Firebase 8及更低版本的用法，因此无法生效。

具体修改步骤 #

• 第一步：在SwipeCards组件顶部补充导入Firestore相关方法

  import { collection, onSnapshot } from 'firebase/firestore';
  

• 第二步：修改useEffect内的Firestore调用逻辑，同时补充组件卸载时的监听器清理逻辑，避免内存泄漏
  完整修改后的代码如下：

  useEffect(() => {
    // 新版API需先调用collection方法传入db实例和集合名获取集合引用
    const buddiesCollectionRef = collection(database, 'buddies');
    // 绑定快照监听器
    const unsubscribe = onSnapshot(buddiesCollectionRef, (snapshot) => {
      setBuddies(snapshot.docs.map((doc) => doc.data()));
    });
    // 组件卸载时销毁监听器
    return () => unsubscribe();
  }, []);
  

补充说明 #

无需修改你现有的firebase.js配置代码，只要把所有Firestore相关的操作都改为模块化函数调用即可。后续如果需要用到增删改查的其他能力，都可以从firebase/firestore包导入对应的addDoc、deleteDoc、getDoc等方法使用。

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