如何在现代 Firebase SDK 中正确使用 Firestore 添加数据-js教程-PHP中文网

如何在现代 Firebase SDK 中正确使用 Firestore 添加数据

本文详解 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 数据交互。