解决 Firebase TypeError: getFirestore is not a function 错误：深入理解模块化 SDK 初始化

Firebase SDK 版本概览

firebase sdk 经历了从 v8 (命名空间 api) 到 v9 (模块化 api) 的重大演进。v8 版本采用全局命名空间的方式，例如 firebase.firestore()。而 v9 版本则引入了模块化设计，要求开发者显式导入所需的服务和函数，例如 import { getfirestore } from 'firebase/firestore';。

为了方便开发者从 v8 迁移到 v9，Firebase 提供了兼容性 (compat) 库。这些库允许 v8 风格的代码与 v9 模块化代码共存，例如 import 'firebase/compat/firestore'; 会注册 v8 命名空间下的 Firestore API。然而，兼容性库并非旨在直接导出 v9 模块化函数，如 getFirestore。

TypeError: getFirestore is not a function 错误原因分析

当您遇到 TypeError: (0 , firebase_compat_firestore__WEBPACK_IMPORTED_MODULE_1__.getFirestore) is not a function 这样的错误时，其根本原因在于您尝试从 firebase/compat/firestore 这样的兼容性路径中导入并使用 getFirestore 函数。

getFirestore 是 Firebase v9 模块化 SDK 中引入的一个函数，它直接从 firebase/firestore 模块导出。而 firebase/compat/firestore 模块的主要作用是注册旧版 v8 的 Firestore API，而不是导出 v9 的模块化函数。因此，当构建工具尝试从兼容性模块中查找 getFirestore 时，会因为找不到该导出而抛出类型错误。简而言之，您混淆了兼容性导入和模块化函数的正确使用方式。

正确的 Firebase 模块化 SDK 初始化

要正确初始化 Firebase 应用并获取 Firestore 或其他服务实例，您应该始终使用模块化 SDK 的直接导入路径。以下是初始化 Firebase 应用、Firestore 数据库和认证服务的标准步骤：

1. 安装或更新 Firebase 包 确保您的项目中安装了最新版本的 Firebase SDK。这可以通过以下命令完成：

   npm install firebase@latest
   # 或者
   yarn add firebase@latest

   登录后复制

2. 创建 Firebase 配置文件 将您的 Firebase 项目配置信息存储在一个对象中。这些信息通常从 Firebase 控制台获取，并建议通过环境变量进行管理，以提高安全性。

   const firebaseConfig = {
       apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
       authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
       projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
       storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
       messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
       appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
       measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
   };

   登录后复制

3. 导入必要的模块 从对应的模块路径中导入 initializeApp、getFirestore 和 getAuth 等函数。注意，这里不再使用 firebase/compat/* 路径。

   import { initializeApp } from "firebase/app"; // 用于初始化 Firebase 应用
   import { getFirestore } from "firebase/firestore"; // 用于获取 Firestore 实例
   import { getAuth } from "firebase/auth"; // 用于获取 Auth 实例
   // 如果还需要其他服务，如 Storage、Functions 等，也从对应的模块导入
   // import { getStorage } from "firebase/storage";
   // import { getFunctions } from "firebase/functions";

   登录后复制

4. 初始化 Firebase 应用并获取服务实例 首先调用 initializeApp 初始化 Firebase 应用，然后将返回的应用实例传递给 getFirestore、getAuth 等函数，以获取相应服务的实例。

   // 初始化 Firebase 应用
   const app = initializeApp(firebaseConfig);
   
   // 获取 Firestore 数据库实例
   export const DB = getFirestore(app);
   
   // 获取认证服务实例
   export const auth = getAuth(app);
   
   // 如果有其他服务，也按此模式获取
   // export const storage = getStorage(app);
   // export const functions = getFunctions(app);

   登录后复制

   将这些实例导出，以便在应用程序的其他部分使用。

注意事项与最佳实践

• 新项目强烈推荐模块化 SDK：对于任何新的 Firebase 项目，都应优先使用模块化 SDK。它提供了更好的摇树优化 (tree-shaking) 能力，从而减小最终的打包体积，并提升应用性能。
• 避免混用 compat 和模块化导入：为了避免混淆和潜在的错误，除非您正在进行从 v8 到 v9 的逐步迁移，否则应避免在同一文件中混用 firebase/compat/* 和直接的模块化导入。
• 按需导入：模块化 SDK 的一个主要优势是您可以按需导入所需的功能。例如，如果您的应用不使用 Firebase Auth，则无需导入 getAuth。这有助于进一步减小最终的应用包大小。
• 环境变量管理：Firebase 配置信息，尤其是 apiKey 和 authDomain 等，应通过环境变量（如 Next.js 中的 process.env.NEXT_PUBLIC_...）进行管理，而不是硬编码在代码中。这有助于保护敏感信息，并允许在不同环境（开发、生产）中使用不同的配置。
• 单例模式：在大多数前端框架（如 React, Next.js, Vue）中，Firebase 初始化代码通常只运行一次。确保您的 Firebase 实例是单例的，避免重复初始化，这可以通过在文件顶部定义并导出实例来实现。

总结

TypeError: getFirestore is not a function 错误是由于错误地尝试从 Firebase 兼容性 (compat) 模块中导入模块化 SDK 函数所致。解决此问题的关键在于理解 Firebase v9 模块化 SDK 的工作方式，并始终从正确的模块路径（例如 firebase/firestore）导入和使用相应的函数。遵循上述指南，您将能够顺利地初始化 Firebase 服务，并充分利用模块化 SDK 带来的性能和开发体验优势。

以上就是解决 Firebase TypeError: getFirestore is not a function 错误：深入理解模块化 SDK 初始化的详细内容，更多请关注php中文网其它相关文章！