Ionic React项目集成Firestore遇TS报错：Property 'firestore'不存在

问题描述 #

在Ionic React + TypeScript项目中集成Firebase Firestore时，IDE在const db = firebase.firestore();代码处报错：

Property 'firestore' does not exist on type 'typeof import("PROJECT_FOLDER/node_modules/firebase/app/dist/app/index")'.ts(2339)

IDE可正常识别firebase.initializeApp()等主包函数，但无法识别firebase.firestore()。当前package.json中firebase版本为10.8.0，firestore版本为4.4.2。

当前实现代码

import firebase from "firebase/app";
import "firebase/firestore";

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Initialize Cloud Firestore and get a reference to the service
const db = firebase.firestore();

db.collection("users").add({
    first: "Ada",
    last: "Lovelace",
    born: 1815
})
.then((docRef) => {
    console.log("Document written with ID: ", docRef.id);
})
.catch((error) => {
    console.error("Error adding document: ", error);
});

核心问题分析 #

• 版本不兼容：firebase主包与firestore包版本完全不匹配，Firebase生态下所有相关包版本必须保持一致，否则会出现类型定义缺失、API不兼容问题。
• API版本差异：Firebase v9+采用全新模块化API设计，旧的命名空间式调用（firebase.firestore()）默认不再支持，需切换至兼容模式或模块化写法。

具体解决步骤 #

步骤1：统一Firebase依赖版本 #

卸载不匹配的旧包，重新安装版本一致的官方依赖：

# 卸载旧包
npm uninstall firebase firestore
# 安装同版本的firebase和官方firestore包
npm install firebase@10.8.0 @firebase/firestore@10.8.0

注意：官方Firestore包的正确名称是@firebase/firestore，直接安装firestore会获取到第三方非官方包。

步骤2：修复代码调用方式 #

有两种方案可选：

方案A：Compat兼容模式（最小改动原有代码）

改用兼容包导入，保留旧的命名空间写法：

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';

const firebaseConfig = {
  // 你的项目配置
};

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

// 后续业务代码无需改动
db.collection("users").add({
    first: "Ada",
    last: "Lovelace",
    born: 1815
})
.then((docRef) => {
    console.log("Document written with ID: ", docRef.id);
})
.catch((error) => {
    console.error("Error adding document: ", error);
});

方案B：模块化API（官方推荐，更轻量化）

采用v9+官方模块化写法，优化打包体积：

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, addDoc } from 'firebase/firestore';

const firebaseConfig = {
  // 你的项目配置
};

// 初始化App实例
const app = initializeApp(firebaseConfig);
// 获取Firestore实例
const db = getFirestore(app);

// 用异步函数调用模块化API
async function addUser() {
  try {
    const docRef = await addDoc(collection(db, "users"), {
      first: "Ada",
      last: "Lovelace",
      born: 1815
    });
    console.log("Document written with ID: ", docRef.id);
  } catch (e) {
    console.error("Error adding document: ", e);
  }
}

addUser();

步骤3：刷新IDE类型缓存 #

完成修改后，重启IDE或执行TypeScript类型检查命令，确保类型定义正常加载：

npx tsc --noEmit

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