React项目报firebaseApp.firestore is not a function错误如何解决

报错核心原因为代码写法与Firebase版本不匹配，同时npm包与CDN重复引入导致实例冲突，可按以下步骤修复：

步骤1：清理冲突资源 #

• 删除public/index.html中所有你新增的Firebase相关CDN脚本，使用npm管理依赖时无需额外引入CDN，重复加载会导致实例异常
• 删除项目根目录下的node_modules文件夹、package-lock.json文件，执行npm cache clean --force清理npm缓存，之后执行npm install恢复依赖

步骤2：根据Firebase版本选择对应写法 #

方案A：使用v9/v10+ 模块化API（当前默认安装版本，推荐） #

修改firebase_init.js代码如下：

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
   apiKey: "",
   authDomain:"",
   projectId:"",
   storageBucket:"",
   messagingSenderId:"",
   appId:"",
   measurementId:""
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);
const auth = getAuth(firebaseApp);

export { db, auth };

方案B：沿用v8版本链式调用API #

如果要保留原有写法，先安装v8版本Firebase：
npm install firebase@8.10.0
修改firebase_init.js代码，补充导入对应服务模块：

import * as firebase from "firebase/app";
// 必须手动导入服务模块才会挂载到firebase实例上
import "firebase/firestore";
import "firebase/auth";

const firebaseConfig = {
   apiKey: "",
   authDomain:"",
   projectId:"",
   storageBucket:"",
   messagingSenderId:"",
   appId:"",
   measurementId:""
};

const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();

export { db, auth };

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