本文详解 Firebase v9+ 模块化 SDK 中 Firestore 的正确初始化与数据写入方式，重点解决 db.collection is not a function 错误，涵盖 Web 端（firebase/firestore）与 React Native（@react-native-firebase/firestore）两种场景的适配方案。
本文详解 firebase v9+ 模块化 sdk 中 firestore 的正确初始化与数据写入方式，重点解决 `db.collection is not a function` 错误，涵盖 web 端（`firebase/firestore`）与 react native（`@react-native-firebase/firestore`）两种场景的适配方案。
Firebase SDK 从 v9 开始全面转向模块化（Modular）架构，彻底弃用了旧版 namespaced API（如 db.collection().doc().set()）。你遇到的错误 TypeError: db.collection is not a function 正是因仍尝试调用已被移除的链式方法所致——在新 SDK 中，collection、doc、setDoc、addDoc 等全部变为独立导入的函数，而非 db 实例的方法。
✅ 正确写法（Web 端，适用于 Next.js / React）
首先确保已正确导入并使用组合式函数：
// firebaseConfig.ts
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);在组件中，不再使用 db.collection(...).doc(...).set(...)，而是按需导入并组合使用：
// 在提交处理函数中
import { collection, doc, setDoc } from "firebase/firestore";
import { db } from "@/lib/firebaseConfig"; // 路径根据实际调整
onSubmit={async (values) => {
try {
// 方式一：覆盖写入指定 ID 文档（等价于旧版 .set()）
await setDoc(doc(db, "messages", "user"), {
fullName: values.fullName,
companyName: values.companyName,
email: values.email,
description: values.description,
createdAt: new Date(),
});
toast("Message Sent Successfully");
console.log("Document successfully written!");
} catch (error) {
console.error("Error writing document: ", error);
toast("Failed to send message");
}
}}? 补充说明：
- doc(db, "messages", "user") 创建对 messages/user 文档的引用；
- 若希望自动生成 ID（类似旧版 add()），请改用 addDoc(collection(db, "messages"), {...})；
- 所有 Firestore 操作均为异步，务必使用 await 或 .then()，并在 onSubmit 中声明 async（如上例）。
⚠️ 特别注意：React Native 场景不可混用 Web SDK
如果你项目是 React Native，且使用了 toast（如 react-native-toast-message），那么你极可能正在混合使用 Web SDK 和原生 Firebase 封装库 —— 这是常见误区。
- ❌ 错误：在 RN 项目中安装并使用 firebase/firestore（Web SDK）；
- ✅ 正确：应使用官方维护的 @react-native-firebase/firestore，其 API 保留了类 namespaced 风格：
npm install @react-native-firebase/app @react-native-firebase/firestore # iOS 需额外运行: cd ios && pod install
import firestore from '@react-native-firebase/firestore';
// 此处语法才合法：
await firestore()
.collection('messages')
.doc('user')
.set({
fullName: values.fullName,
// ...
});? 关键区别总结： | 场景 | SDK 包 | 初始化方式 | 写入语法示例 | |--------------|-------------------------------|----------------------|------------------------------------| | Web（Next.js/React） | firebase/firestore | getFirestore(app) | setDoc(doc(db, 'c', 'id'), data) | | React Native | @react-native-firebase/firestore | firestore() | firestore().collection('c').doc('id').set(data) |
✅ 最佳实践建议
- 环境变量安全：确保所有 NEXT_PUBLIC_ 前缀变量已在 .env.local 中正确定义，且仅暴露客户端必需字段（如 apiKey、projectId）；
- 错误边界：Firestore 操作应始终包裹 try/catch，避免未捕获异常中断表单流程；
- 类型安全（推荐）：配合 TypeScript 定义接口，提升开发体验与健壮性：
interface MessageData {
fullName: string;
companyName?: string;
email: string;
description: string;
createdAt: Date;
}- 调试技巧：在浏览器控制台检查 Network 标签页，确认请求是否发出；若出现 CORS 或权限错误，请检查 Firebase 控制台 → Firestore → 安全规则（默认为拒绝所有请求）。
遵循模块化范式，明确区分平台 SDK，即可彻底规避 db.collection is not a function 类错误，实现稳定可靠的 Firestore 数据交互。
