React集成Firestore报错：_firebase__WEBPACK_IMPORTED_MODULE_1__.default.collection不是函数

错误原因 #

你使用的是Firebase v9+ 模块化SDK，但代码中仍沿用了v8及以下版本的命名空间语法（db.collection()），两者API调用方式不兼容，导致报错。

修复步骤 #

Firebase v9+采用函数式API，所有操作需导入对应的工具函数执行，具体修改如下：

1. 补充导入必要函数 #

在App.js中，从firebase/firestore导入collection和addDoc函数：

import { FieldValue, collection, addDoc } from 'firebase/firestore'; // 新增collection、addDoc

2. 修改添加待办事项的代码 #

将原来的db.collection('TodoApp').add(...)替换为模块化写法：

const Add = (e) => {
  e.preventDefault()
  // 使用addDoc和collection函数替代旧写法
  addDoc(collection(db, 'TodoApp'), {
    TODO: text,
    TIME: dateTime,
    SERVERTIMESTAMP: FieldValue.serverTimestamp()
  })
    .then(() => {
      setText('')
      alert('Todo added successfully')
    })
    .catch((error) => {
      alert('Error adding todo', error)
    })
}

额外说明 #

Firebase v9+模块化API支持摇树优化，能大幅减小最终打包体积。如果暂时不习惯新语法，也可以使用兼容层（firebase/compat/*），但官方推荐优先使用模块化版本。

内容的提问来源于stack exchange，提问作者Mateo Pérez