Vue+Firebase9报Cannot read properties of undefined (reading 'collection')求助

问题根因 #

你在组件中直接调用dbStore.collection()，但没有导入main.js中导出的dbStore实例，导致dbStore为undefined，触发读取collection属性的报错。你提到其他方式可以正常写入数据，大概率是其他对应的页面/组件已经做了正确的导入操作。

解决步骤 #

1. 在你的组件script代码最顶部添加导入语句，路径根据你项目的目录结构调整即可：

// 示例：如果组件存放在src/components目录下，使用相对路径导入main.js的dbStore
import { dbStore } from '../main.js'
// 若配置了@指向src目录的路径别名，也可以直接写
// import { dbStore } from '@/main.js'

2. （可选验证）如果导入后仍有异常，可以在main.js的导出语句后添加打印，确认Firestore实例初始化正常：

export const dbStore = firebase.firestore();
console.log('Firestore实例初始化结果：', dbStore)

注：你当前使用的是Firebase 9的兼容版本（compat包），原有的链式调用dbStore.collection()写法完全符合兼容版本的语法规范，不需要修改调用逻辑。

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