ReactJS集成Firebase项目调用Firestore collection方法抛出TypeError错误

核心触发原因 #

• 你当前导出的fire变量是firebase.initializeApp()返回的Firebase应用根实例，并非Firestore数据库服务实例，根实例本身不存在collection方法，直接调用必然抛出类型错误。
• 导入路径不匹配SDK版本：Firebase v9及以上版本默认采用模块化API，若仍沿用旧版全量导入路径但未正确配置compat兼容层，会导致Firestore服务未正确挂载，对应方法不存在。
• 未正确引入firebase/firestore模块，导致SDK未注册Firestore相关能力。

分步修复方案 #

1. 修正 fire.js 配置逻辑 #

原配置仅导出了应用根实例，未单独获取Firestore服务实例，修正后代码如下：

// fire.js
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
  // 填入你的项目配置凭证
};

// 单例模式初始化应用实例
const app = !firebase.apps.length 
  ? firebase.initializeApp(firebaseConfig) 
  : firebase.app();

// 从应用实例上获取Firestore数据库服务
const db = app.firestore();

// 按需导出
export { app, db };

说明：Firebase应用根实例只负责项目配置管理、各服务能力挂载，不会直接提供数据库操作方法，必须单独获取对应的db实例后才能执行集合、文档的操作。

2. 修正ContactUs组件的调用逻辑 #

将原代码中直接导入根实例调用的逻辑，替换为导入单独导出的db实例：

// 替换原导入语句
import { db } from "../fire";

// 修正handleSubmit中的数据库调用
const handleSubmit = (e) => {
    e.preventDefault();
    db.collection('contact').add({
        name: name,
        email: email,
        message: message,
    })
    .then(() => {
        alert("Thanks! We'll get back to you soon!");
    })
    .catch(error => {
        alert(error.message);
    })
    setName("");
    setEmail("");
    setMessage("");
};

补充校验项 #

• 确认项目依赖中firebase版本与导入路径匹配：若使用v9+版本的compat兼容模式，导入路径必须为firebase/compat/xxx，否则会出现服务未注册的问题。
• 确认Firestore数据库已在Firebase控制台中创建激活，避免出现初始化权限相关的报错。

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