React中导出Firestore实例报模块未找到错误如何解决

该报错由两个常见原因导致，对应修复方式如下：

• 导入路径错误：如果你在其他文件中引入自己写的src/firebase.js配置文件，导入路径必须以./开头，正确写法为import { db } from './firebase'。漏写./时构建工具会默认去node_modules目录下查找npm包，无法匹配本地文件。
• Firebase版本API变更：Firebase v9.0及以上版本放弃了旧的全量导入写法，不再支持直接从firebase包根路径调用firestore()方法。
  1. 先确认依赖安装正确，在项目根目录执行安装命令：
     npm install firebase
  2. 替换src/firebase.js中的初始化代码为模块化写法：

  import { initializeApp } from "firebase/app";
  import { getFirestore } from "firebase/firestore";
  
  // 替换为你自己的Firebase项目配置参数
  const firebaseConfig = {
    apiKey: "项目apiKey",
    authDomain: "项目authDomain",
    projectId: "项目ID",
    storageBucket: "项目存储桶地址",
    messagingSenderId: "消息发送ID",
    appId: "项目appId"
  };
  
  const app = initializeApp(firebaseConfig);
  export const db = getFirestore(app);
  

  如果需要临时兼容旧版本v8的写法，可以用compat路径过渡（不推荐长期使用，会增大打包体积）：

  import firebase from 'firebase/compat/app';
  import 'firebase/compat/firestore';
  
  const firebaseConfig = { /* 你的配置 */ };
  const app = firebase.initializeApp(firebaseConfig);
  export const db = firebase.firestore();
  

根据使用场景分为云端正式环境操作和本地开发环境操作两类：

云端正式环境导出/导入 #

1. 先全局安装Firebase官方工具并完成账号登录、项目关联：

npm install -g firebase-tools
firebase login
firebase use 你的Firebase项目ID

• 导出数据：执行命令将云端数据导出到谷歌云存储指定路径
  gcloud firestore export gs://你的项目云存储桶路径/导出文件存放目录
• 导入数据：执行命令将之前导出的备份恢复到Firestore
  gcloud firestore import gs://你的项目云存储桶路径/之前导出的文件目录

注意：云端导入导出操作会产生云存储、Firestore读写的对应计费，操作前请确认目标存储路径的读写权限已开启。

本地开发环境导出/导入 #

本地开发做数据备份、测试数据迁移时，可以用导入导出工具操作：

1. 全局安装工具：
   npm install -g node-firestore-import-export

• 导出数据到本地json文件：
  firestore-export --accountCredentials 你的Firebase服务账号密钥路径.json --backupFile ./本地备份文件名.json --prettyPrint
• 导入本地json文件到Firestore：
  firestore-import --accountCredentials 你的Firebase服务账号密钥路径.json --backupFile ./要导入的本地备份文件名.json
  服务账号密钥可在Firebase控制台项目设置-服务账号页面生成下载，请勿将密钥文件提交到公共代码仓库。

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