如何修复React项目引入Firebase v9时Can't resolve 'firebase'报错

错误原因 #

你安装的是Firebase v9.0.1版本，该版本采用全新模块化API设计，废弃了v8及之前版本的import firebase from "firebase"全局命名空间导入方式，和你参考的旧文章使用的语法不兼容，因此抛出模块找不到的报错。

解决方案1：降级到Firebase v8（无需修改现有业务代码，最快修复） #

直接卸载现有版本，安装v8最新稳定版即可：

npm uninstall firebase
npm install firebase@8.10.0

安装完成后重启开发服务器，报错就会消失，你现有的所有代码都不需要调整，可以直接运行。

解决方案2：适配Firebase v9模块化语法（推荐长期使用） #

如果想使用最新版本的Firebase，需要修改三处代码的导入和调用逻辑：

1. 修改firebase.js文件 #

替换原有内容为：

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

const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxxxxxxxxx",
  projectId: "xxxxxxxxxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxxxxxxx",
  messagingSenderId: "xxxxxxxxxxxxxx",
  appId: "xxxxxxxxxxxxxxxxxxx",
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export default db;

2. 修改App.js文件 #

首先删除原有import firebase from "firebase"的导入语句，新增Firestore相关方法的导入，同时修改timestamp和数据监听的逻辑：

// 顶部新增导入
import { collection, addDoc, orderBy, query, onSnapshot, serverTimestamp } from "firebase/firestore";
import db from "./firebase";

// 修改useEffect内的监听逻辑
useEffect(() => {
  const q = query(collection(db, "todos"), orderBy("timestamp", "desc"));
  const unsubscribe = onSnapshot(q, (snapshot) => {
    setTodos(
      snapshot.docs.map((doc) => ({
        id: doc.id,
        todo: doc.data().todo,
      }))
    );
  });
  return () => unsubscribe();
}, []);

// 修改addTodo函数内的添加逻辑
const addTodo = (event) => {
  event.preventDefault();
  addDoc(collection(db, "todos"), {
    todo: input,
    timestamp: serverTimestamp(),
  });
  setInput("");
};

3. 修改Todo.js文件 #

新增对应Firestore方法的导入，修改更新和删除的逻辑：

// 顶部新增导入
import { doc, updateDoc, deleteDoc } from "firebase/firestore";
import db from "./firebase";

// 修改updateTodo函数
const updateTodo = () => {
  const todoRef = doc(db, "todos", props.todo.id);
  updateDoc(todoRef, {
    todo: input,
  });
  setOpen(false);
};

// 修改删除按钮的点击逻辑
<Button
  onClick={(e) => {
    const todoRef = doc(db, "todos", props.todo.id);
    deleteDoc(todoRef);
  }}
>
  删除
</Button>

修改完成后重启开发服务器即可正常运行。

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