Vue.js组件中使用Firestore时Firebase collection()报错的解决方法

核心问题：导出与导入方式不匹配 #

你的init.js使用命名导出暴露db：

export { db };

但组件中采用了默认导入的方式引入：

import db from "../firebase/init";

这种不匹配会导致db的值不符合collection()的参数要求，进而触发报错。

修复步骤 #

1. 修改组件中的导入语句，改为命名导入：

import { collection, addDoc } from "firebase/firestore";
// 解构导入命名导出的db
import { db } from "../firebase/init";

async addQuestion() {
  const colRef = collection(db, "Questions");
  console.log(colRef);
  // 后续可正常执行addDoc操作
  // await addDoc(colRef, { /* 待存储的数据 */ });
}

2. 额外验证项：

• 确认firebaseConfig内所有字段填写完整且正确，尤其是projectId，它是Firestore定位项目的核心标识。
• 确保项目中Firebase SDK版本统一，getFirestore和collection均来自v9+版本的模块化API，避免版本差异引发的API兼容问题。
• 检查Vue项目构建工具（Vue CLI/Vite）的模块配置，确保ES模块导出逻辑未被破坏。

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