Firebase SDK9下调用collection报is not a function错误排查

错误原因 #

Firebase SDK 9 提供了两套并行的API：

• 新的模块化Tree-shakable API：所有方法都是顶层导出函数，不再挂载到Firestore实例上，调用逻辑和v8版本完全不同
• compat兼容API：完全对齐v8的链式调用写法，作为过渡方案使用

你的代码里初始化Firestore用的是模块化API的getFirestore()方法，返回的实例本身不存在collection这类挂载方法，但业务代码还在沿用v8的链式调用写法，同时你虽然引入了compat兼容包，但初始化逻辑没有走compat的API，兼容包没有生效，所以直接抛出函数不存在的错误。

修复方法 #

你可以根据项目需求二选一：

方案1：使用原生模块化API（官方推荐） #

模块化API支持构建时摇树优化，能大幅减少最终打包体积，是官方长期维护的标准写法。

1. 精简Firebase初始化代码，移除无用的compat导入：

import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore'
import firebaseConfig from './config';

const firebaseApp = initializeApp(firebaseConfig);
const dba = getFirestore(firebaseApp)

export default dba;

2. 修改表单提交逻辑，导入对应的顶层方法替换原有链式调用：

// 组件文件顶部新增导入
import { collection, addDoc } from "firebase/firestore";
import dba from "你的firebase初始化文件路径";

const onSubmitHandler = (e) =>{
    e.preventDefault()
    addDoc(collection(dba, 'contact'), {
        name: name,
        email:email,
        message :message,
    })
    .then(() => {
        setOpen(true);
    })
    .catch((error) =>{
        alert(error.message)
    })
  
    setName("")
    setEmail("")
    setMessage("")
}

方案2：使用compat兼容层，保留原有v8代码 #

如果不想改动现有业务逻辑，可以全程使用compat兼容包写法，原有v8代码不需要任何调整。
只需要修改Firebase初始化代码即可：

// 从compat入口导入firebase
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import firebaseConfig from './config';

const firebaseApp = firebase.initializeApp(firebaseConfig);
// 通过compat方法拿到的Firestore实例和v8用法完全一致
const dba = firebaseApp.firestore();

export default dba;

提示：compat层是过渡方案，不支持Tree-shaking，打包体积会比原生模块化写法大30%以上，长期维护的项目建议逐步迁移到模块化写法。

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