React网站无法连接Firestore，导入firebase相关模块报错如何解决？

问题原因 #

所有报错都是因为使用了 Firebase v9及以上版本，但采用的是v8及更早版本的导入和调用语法，同时本地未安装firebase依赖包。
三次报错对应的具体原因：

• 首次报错：Firebase v9+的firebase/app包不再提供默认导出，旧的默认导入语法失效
• 第二次报错：项目未安装firebase依赖，所以直接导入firebase包时提示找不到模块
• 第三次报错：v9+采用模块化导出，所有方法都是单独导出的，import * as firebase导入的对象上没有挂载initializeApp方法，调用时就会抛出 undefined 错误

解决方案 #

可以根据需求选择以下任意一种方案：

方案1：使用兼容版语法（改动最小，适配现有代码）

1. 先安装firebase依赖，在项目根目录执行命令：

npm install firebase

2. 修改config.js的导入语句即可，其余代码不用改动：

// 导入compat兼容包，保留v8的所有调用方式
import firebase from 'firebase/compat/app'
// 如果需要使用Firestore、Auth等服务，额外导入对应compat包即可
// import 'firebase/compat/firestore'
// import 'firebase/compat/auth'

const firebaseConfig = {
      // 你的配置信息
};

firebase.initializeApp(firebaseConfig);
export default firebase;

方案2：使用新版模块化语法（官方推荐，打包体积更小）

1. 同样先安装firebase依赖：

npm install firebase

2. 改写config.js为模块化写法：

import { initializeApp } from 'firebase/app'
// 需要Firestore的话导入对应方法
// import { getFirestore } from 'firebase/firestore'

const firebaseConfig = {
      // 你的配置信息
};

const app = initializeApp(firebaseConfig);
// 导出需要的服务即可
// export const db = getFirestore(app)
export default app;

后续在其他组件使用时，直接从对应firebase包导入方法调用即可，不需要再从config导入firebase对象。

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