Quasar项目导入Firebase出现undefined报错问题求助

问题原因 #

你遇到的导入undefined问题是Firebase v9的模块化特性导致的，从v9版本开始Firebase全面采用ESM模块化设计，没有提供默认导出，所以你使用import firebase from '@firebase/app'的语法无法获取到对象，返回undefined是正常现象，不是安装错误。

解决方案 #

1. 推荐用法：按需导入（最优）

v9设计的核心优势是支持树形摇（Tree Shaking），可以大幅减少最终打包体积，你不需要导入整个firebase对象，只需要按需导入用到的方法即可：

// 导入初始化方法
import { initializeApp } from '@firebase/app'
// 导入Firestore相关方法
import { getFirestore, collection, getDocs } from '@firebase/firestore'

// 填入你的Firebase配置
const firebaseConfig = {
  // 你的配置项
}

// 初始化应用
const app = initializeApp(firebaseConfig)
// 初始化Firestore实例
const db = getFirestore(app)

后续所有Firestore操作都直接调用对应导入的方法即可，不需要通过firebase对象调用。

2. 兼容旧版写法（非必要不推荐）

如果你习惯了v8版本把所有方法挂载到firebase对象上的用法，可以导入兼容包，不需要修改现有代码逻辑：

• 首先修改依赖，把你现有的@firebase/app、@firebase/firestore替换为官方整合的firebase包，直接安装firebase@9即可，不需要单独安装分包
• 导入兼容模块：

import firebase from 'firebase/compat/app'
import 'firebase/compat/firestore'

const firebaseConfig = {
  // 配置项
}
const app = firebase.initializeApp(firebaseConfig)
const db = firebase.firestore()

用这种写法你就能像旧教程里那样直接调用firebase.xxx的方法，包括firestore相关的接口。

常见疑问解答 #

1. 为啥全量导入* as firebase之后没有firestore方法？
   因为v9的模块化设计是功能完全拆分的，firestore的逻辑没有默认集成在@firebase/app包里，你即使全量导入app模块也不会包含firestore的内容，需要单独导入firestore模块才会加载对应功能。

2. 怎么核实项目实际安装的Firebase版本？
   在项目根目录执行命令npm ls firebase（如果用yarn就执行yarn list firebase），就能看到项目本地node_modules中安装的实际版本，你Mac全局安装的Firebase版本不会影响项目本地的依赖版本。

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