React+TypeScript项目导入firebase时报错找不到模块或对应类型声明如何解决？

问题根因 #

你遇到的报错是两个问题共同导致的：

• Firebase v9及以上版本已经内置了完整的TypeScript类型定义，不需要额外安装@types/firebase，你安装的@types/firebase是适配v8及更早版本的旧类型包，和v9完全不兼容
• 你当前使用的导入语法是Firebase v8的命名空间式语法，v9默认使用模块化API，原有语法需要用兼容包适配

解决步骤 #

第一步：卸载旧的冗余类型包 #

执行命令删除不兼容的类型包：

yarn remove @types/firebase

第二步：选择适配方案，二选一即可 #

方案1：保留原有代码逻辑，使用v9兼容包

只需要修改导入路径为兼容包路径即可，原有业务代码不需要调整：

// 替换原有firebase导入
import firebase from "firebase/compat/app";
import "firebase/compat/storage";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import dotenv from "dotenv";

dotenv.config();

const firebaseConfig = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID,
  appId: process.env.APP_ID,
  measurementId: process.env.MEASUREMENT_ID,
};
const app =
  firebase.apps.length > 0
    ? firebase.app()
    : firebase.initializeApp(firebaseConfig);

const auth = app.auth();
const db = app.firestore();
const storage = app.storage();
const timestamp = firebase.firestore.FieldValue.serverTimestamp();

const EmailProvider = new firebase.auth.EmailAuthProvider();
const _ = {
  auth,
  db,
  storage,
  timestamp,
  EmailProvider,
};
export default _;

方案2：改用v9官方推荐的模块化写法（更优，打包体积更小）

重构为模块化写法，性能更好：

import { initializeApp, getApp, getApps } from "firebase/app";
import { getAuth, EmailAuthProvider } from "firebase/auth";
import { getFirestore, serverTimestamp } from "firebase/firestore";
import { getStorage } from "firebase/storage";
import dotenv from "dotenv";

dotenv.config();

const firebaseConfig = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID,
  appId: process.env.APP_ID,
  measurementId: process.env.MEASUREMENT_ID,
};

// 初始化app，避免热重载重复初始化
const app = getApps().length > 0 ? getApp() : initializeApp(firebaseConfig);

const auth = getAuth(app);
const db = getFirestore(app);
const storage = getStorage(app);
const timestamp = serverTimestamp();

const _ = {
  auth,
  db,
  storage,
  timestamp,
  EmailProvider,
};
export default _;

第三步：消除残留报错 #

如果修改完成后VSCode仍然报错，执行以下操作：

1. 删除node_modules文件夹和yarn.lock文件，重新执行yarn install安装依赖
2. 按快捷键Ctrl+Shift+P（Mac为Command+Shift+P），选择TypeScript: Restart TS Server重启TypeScript语言服务

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