Firestore连接异常：db.collection不是函数的报错求助

问题原因 #

你使用的是Firebase 9+ 模块化SDK，而db.collection()是Firebase 8及更早版本的命名空间式API写法，新版本已废弃这种调用方式，必须使用模块化的函数式API。

解决方案 #

修改代码，使用Firebase 9+ 提供的模块化方法：

1. 首先在提交代码所在文件中导入所需的Firestore方法：

import { collection, doc, setDoc } from "firebase/firestore";

2. 替换原提交逻辑中的代码，改用函数式写法：

onSubmit={(values) => {
  // 获取集合和文档引用
  const messageDocRef = doc(collection(db, "messages"), "user");
  
  setDoc(messageDocRef, {
    fullName: values.fullName,
    companyName: values.companyName,
    email: values.email,
    description: values.description
  }).then(() => {
    toast("Message Sent Successfully")
    console.log("Document successfully written!");
  }).catch((error) => {
    console.error("Error writing document: ", error);
  })
}}

可选兼容方案（不推荐长期使用） #

如果暂时不想切换到模块化API，可以使用Firebase的compat兼容包，修改你的Firebase配置文件：

// 导入compat版本的SDK
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore/compat";

const firebaseConfig = { /* 你的配置内容 */ };

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export { app, db };

这种情况下你原来的db.collection()写法就能正常工作，但模块化API支持树摇优化，能显著减小打包后的代码体积，更适合生产环境。

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