React中Firestore数据库调用报错：db.collection不是函数

这个错误核心是你在App.js中调用collection方法的对象不是正确的Firestore实例，而是默认Firebase应用对象或导出/导入流程出了问题。以下是针对性排查和解决步骤：

1. 检查firebase.js的Firestore实例导出是否正确 #

根据你使用的Firebase版本，确保导出的是getFirestore()（v9+）或firebase.firestore()（v8及更早）返回的实例：

情况1：Firebase v9+ 模块化写法（推荐） #

// firebase.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// 你的Firebase配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  // 其他必填配置项
};

const app = initializeApp(firebaseConfig);
// 获取并导出Firestore实例
const db = getFirestore(app);

export default db;

情况2：Firebase v8 命名空间写法 #

// firebase.js
import firebase from "firebase/app";
import "firebase/firestore";

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

firebase.initializeApp(firebaseConfig);
// 获取并导出Firestore实例
const db = firebase.firestore();

export default db;

2. 检查App.js的导入是否正确 #

确保你导入的是firebase.js中导出的db实例，而非默认Firebase对象：

// App.js 正确导入方式
import db from './firebase';

// 错误示例（会导致调用firebase.default.collection）
// import firebase from './firebase';

3. 验证调用逻辑 #

导入正确的db实例后，调用方式应为：

db.collection('collectionName').onSnapshot((snapshot) => {
  // 处理快照数据
});

如果用Firebase v9+模块化写法，也可以直接使用collection方法：

import { collection, onSnapshot } from "firebase/firestore";
import db from './firebase';

onSnapshot(collection(db, 'collectionName'), (snapshot) => {
  // 处理数据
});

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