使用Firebase开发时编译报错提示db.collection不是函数该如何解决？

• 你当前使用的是 Firebase v9及以上版本的模块化SDK，该版本废弃了v8及更早版本里db.collection()这类链式调用API，改为函数式调用风格
• 你导入的是firebase/firestore/lite轻量版SDK，该版本本身不支持onSnapshot这类实时监听能力，仅支持一次性数据查询，即便语法改对也无法实现实时监听房间列表的需求

步骤1：调整Firestore导入依赖 #

先将轻量版SDK替换为完整版Firestore，同时导入后续需要用到的API：

// 替换原有firestore导入语句
import { getFirestore, collection, onSnapshot } from 'firebase/firestore'

步骤2：修改查询逻辑为模块化写法 #

将useEffect内的原有链式查询替换为函数式调用，同时添加卸载时取消监听的逻辑避免内存泄漏：

useEffect(() => {
  const unsub = onSnapshot(collection(db, 'rooms'), (snapshot) => {
    setRooms(
      snapshot.docs.map((doc) => ({
        id: doc.id,
        data: doc.data(),
      }))
    )
  })
  return () => unsub()
// 建议把db加入依赖数组，不要直接禁用eslint检查
}, [db])

可选优化（建议调整） #

不要在组件内部调用initializeApp初始化Firebase，会导致组件每次渲染都重复初始化实例，建议将初始化逻辑提到组件外全局执行：

// 全局位置（组件外）初始化，不要放在Sidebar组件内部
const firebaseApp = initializeApp(firebaseConfig);
const analytics = getAnalytics(firebaseApp);
const db = getFirestore(firebaseApp)

function Sidebar() {
  const [rooms, setRooms] = useState([]);
  // 后续useEffect逻辑...
}

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