Vite搭建的React TypeScript项目中Firebase无法正常工作

我用Vite搭建了React TypeScript项目，使用Firebase 9.15.0版本，我的firebase.ts代码如下：

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

const firebaseConfig = {
  apiKey: "credentials",
  authDomain: "credentials",
  projectId: "credentials",
  storageBucket: "credentials",
  messagingSenderId: "credentials",
  appId: "credentials",
  measurementId: "credentials",
};

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

当前页面显示空白，控制台报错，移除getFirestore(app)代码后项目可正常运行。

解决方案 #

问题出在Firestore的导入路径上，Firebase 9+的模块化SDK中，Firestore的正确导入路径是firebase/firestore，而非@firebase/firestore。修正后的代码如下：

import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";
// 修正Firestore的导入路径
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "credentials",
  authDomain: "credentials",
  projectId: "credentials",
  storageBucket: "credentials",
  messagingSenderId: "credentials",
  appId: "credentials",
  measurementId: "credentials",
};

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

原因说明 #

@firebase/firestore是Firebase的内部依赖包，直接导入会导致Vite的模块解析出现错误，进而引发运行时异常，最终导致页面空白。Firebase 9+的模块化SDK官方规范是使用firebase/[服务名]的格式导入对应模块，这样才能确保SDK正确加载所有必要的代码，避免出现加载异常。

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