Vue项目使用Firebase v9调用collection()报错 无法添加Firestore文档

错误原因 #

报错提示collection()的第一个参数不是有效的Firestore实例，是由两个问题共同导致的：

1. 初始化Firestore实例时未传入已初始化的Firebase应用实例，导致拿到的db是无效对象
2. firebase.js的导出方式和DataServices.js的导入方式不匹配，实际导入拿到的db为undefined

具体修复步骤 #

步骤1：修正firebase.js代码 #

两处修改：

• 给getFirestore()传入初始化好的firebaseApp实例
• 把默认导出改为命名导出，匹配后续的导入写法
  修改后完整的firebase.js代码：

import { initializeApp } from "firebase/app"
import { getAuth, connectAuthEmulator } from "firebase/auth"
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore"

const firebaseConfig = {
  // 补全你自己项目的apiKey、authDomain等完整配置，不要留空
  apiKey: "你的项目对应apiKey",
  projectId: "covidcare-ytu-clinic",
}

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig)
// 传入firebaseApp实例获取有效Firestore对象
const db = getFirestore(firebaseApp)

connectFirestoreEmulator(db, "localhost", 8081)

const auth = getAuth(firebaseApp)
connectAuthEmulator(auth, "http://localhost:9099")
// 改为命名导出匹配导入语法
export { db, auth }

步骤2：确认DataServices.js导入逻辑 #

现在firebase.js是命名导出db，你原来的import { db } from "@/firebase"写法已经可以正常拿到有效db实例，不需要额外修改。
修改完成后重新运行项目即可正常调用addDoc接口新增文档。

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