React TS项目中安装Firestore时遇到报错问题

数据老陈

2026-8-1

React TypeScript项目安装Firestore报错解决

问题详情

我在React TypeScript项目里安装Firestore时遇到错误，代码和报错情况如下：

项目中的Firebase初始化代码

import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

// Firebase JS SDK v7.20.0及以上版本，measurementId为可选参数
const firebaseConfig = {
    apiKey: "AIzaSyCtaFhg2rHV7ZuPKFIMaisRsiNUhwSzez8",
    authDomain: "twitter-c8bcc.firebaseapp.com",
    projectId: "twitter-c8bcc",
    storageBucket: "twitter-c8bcc.appspot.com",
    messagingSenderId: "951402712179",
    appId: "1:951402712179:web:9fe473631359f6f3656e06",
    measurementId: "G-7QKS23B79V"
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
  
const db = firebaseApp.firestore();

export default db;

报错场景

执行npm install firebase/firestore命令时出现报错：
报错截图

解决步骤

修正安装命令
你用的npm install firebase/firestore是错误的——Firestore是Firebase核心包的一部分，不需要单独安装这个路径下的包。正确的安装命令是：

npm install firebase

如果之前已经执行过错误命令，先卸载无效包：

npm uninstall firebase/firestore

代码适配（可选但推荐）
如果安装的是Firebase v9及以上版本，官方推荐使用模块化API，能有效减少打包体积，适配后的代码如下：

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

const firebaseConfig = {
    apiKey: "AIzaSyCtaFhg2rHV7ZuPKFIMaisRsiNUhwSzez8",
    authDomain: "twitter-c8bcc.firebaseapp.com",
    projectId: "twitter-c8bcc",
    storageBucket: "twitter-c8bcc.appspot.com",
    messagingSenderId: "951402712179",
    appId: "1:951402712179:web:9fe473631359f6f3656e06",
    measurementId: "G-7QKS23B79V"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);