如何解决Firebase报错：firebase__WEBPACK_IMPORTED_MODULE_1___default.a.firestore is not a function

这个问题我之前帮不少开发者踩过坑——你是把Firebase的新旧SDK用法混在一起了，这才导致了编辑器提示和实际运行的矛盾！

问题根源 #

你同时导入了新版Firebase模块化API（getFirestore）和旧版命名空间式的导入（import 'firebase/firestore'），但调用了旧版的firebase.firestore()方法。Firebase v9+之后默认采用模块化架构，不再通过全局firebase对象暴露这些方法，所以运行时会报错；而编辑器的类型提示可能还残留了旧版的类型定义，才会出现“提示是函数但运行报错”的诡异情况。

修复步骤 #

1. 清理旧版导入：删掉import 'firebase/firestore';这一行，新版SDK不需要这样的导入方式。
2. 正确初始化Firebase App：必须先通过initializeApp初始化你的Firebase应用，再获取Firestore实例。
3. 使用新版API获取Firestore：用你已经导入的getFirestore方法替代firebase.firestore()。

修正后的代码示例 #

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

// 你的Firebase配置（记得补充完整projectId、storageBucket等必填项）
const firebaseConfig = {
  apiKey: "--------",
  authDomain: "--------",
};

// 初始化Firebase应用
const firebaseApp = initializeApp(firebaseConfig);

// 获取Firestore实例
const firestore = getFirestore(firebaseApp);

额外提示 #

如果之后要操作集合/文档，也要用新版的模块化方法，比如添加文档的示例：

import { collection, addDoc } from "firebase/firestore";

async function addUser() {
  try {
    const docRef = await addDoc(collection(firestore, "users"), {
      name: "Jane Doe",
      email: "jane@example.com"
    });
    console.log("新增文档ID: ", docRef.id);
  } catch (e) {
    console.error("添加文档失败: ", e);
  }
}

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