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

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

本文详解 Firebase v9+ 模块化 SDK 中 Firestore 的初始化与数据写入方法，解决 db.collection is not a function 常见错误，涵盖 Web 端（如 Next.js）与 React Native 环境的适配要点。

本文详解 firebase v9+ 模块化 sdk 中 firestore 的初始化与数据写入方法，解决 `db.collection is not a function` 常见错误，涵盖 web 端（如 next.js）与 react native 环境的适配要点。

Firebase 从 v9 开始全面转向模块化（Modular）SDK，彻底弃用旧版命名空间式 API（如 db.collection(...).doc(...).set(...)）。你遇到的错误 TypeError: db.collection is not a function 正是典型征兆——说明你仍在尝试调用已被移除的链式方法。

✅ 正确做法：使用函数式 API（Web 端推荐）

在 firebase/firestore 模块中，所有操作均通过独立函数完成，需显式导入并组合使用：

// firebase/config.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); // ✅ 正确获取 Firestore 实例

// 表单提交逻辑（Next.js / React）
import { doc, setDoc, addDoc, collection } from "firebase/firestore";
import { db } from "@/firebase/config";
import { toast } from "react-toastify"; // 或其他通知库

onSubmit={async (values) => {
  try {
    // ✅ 方式1：指定文档 ID（覆盖写入）
    await setDoc(doc(db, "messages", "user"), {
      fullName: values.fullName,
      companyName: values.companyName,
      email: values.email,
      description: values.description,
      createdAt: new Date(),
    });

    // ✅ 方式2：自动生成 ID（推荐用于用户提交类场景）
    // await addDoc(collection(db, "messages"), {
    //   ...values,
    //   createdAt: new Date(),
    // });

    toast.success("Message Sent Successfully");
    console.log("Document written successfully!");
  } catch (error) {
    console.error("Error writing document: ", error);
    toast.error("Failed to send message. Please try again.");
  }
}}

? 关键点：

doc(db, "collection", "id") 构造文档引用；

collection(db, "collection") 构造集合引用；

setDoc() 执行覆盖写入（ID 存在则更新，不存在则创建）；

addDoc() 自动生成唯一 ID 并写入（更安全，避免 ID 冲突）。

⚠️ 注意事项与常见误区

不要混用 v8 和 v9 API：db.collection(...) 是 v8 语法，v9 中已完全移除，强行调用必报错；
环境区分至关重要：
- 若你在 React Native 项目中使用 @react-native-firebase/firestore，则应使用其专属 API（如 firestore().collection(...).doc(...).set(...)），不可混用 Web 版 firebase/firestore；
- 本文方案仅适用于 Web/Next.js/Vite 等浏览器环境；
环境变量必须暴露给客户端：Next.js 中务必使用 NEXT_PUBLIC_ 前缀，否则 process.env 在客户端为 undefined；
错误处理不可省略：Firestore 操作是异步且可能失败（网络中断、权限拒绝、规则限制等），务必包裹 try/catch 并提供用户反馈。

✅ 总结

场景	正确导入	推荐写入方式
Web（Next.js/React）	import { doc, setDoc } from "firebase/firestore"	setDoc(doc(db, "col", "id"), data) 或 addDoc(collection(db, "col"), data)
React Native	import firestore from '@react-native-firebase/firestore'	firestore().collection('col').doc('id').set(data)