运行Vue项目时出现Firebase相关报错且页面空白，该如何解决？

报错根因 #

页面空白的核心诱因是 Uncaught TypeError: this.firebaseLib.initializeApp is not a function 运行时错误阻塞了Vue应用初始化，Firebase开发版本提示、Vue开发模式提示均为非阻塞警告，不会导致页面空白。 #

修复步骤 #

1. 匹配Firebase SDK版本与导入语法 #

目前绝大多数同类报错都是Firebase 9.x+版本用了旧版导入语法导致的，根据你使用的版本对应调整导入逻辑即可：

• 如果你使用Firebase 9.x/10.x（最新主流版本）
  旧的命名空间导入方式已废弃，优先使用模块化导入写法：

  // 导入核心初始化方法
  import { initializeApp } from 'firebase/app'
  // 按需导入需要使用的业务组件，示例为auth认证模块
  import { getAuth } from 'firebase/auth'
  import { getFirestore } from 'firebase/firestore'
  
  // 填入你的Firebase项目配置
  const firebaseConfig = {
    apiKey: "xxx",
    authDomain: "xxx",
    projectId: "xxx",
    storageBucket: "xxx",
    messagingSenderId: "xxx",
    appId: "xxx"
  }
  
  // 初始化应用
  const firebaseApp = initializeApp(firebaseConfig)
  // 初始化业务模块
  const auth = getAuth(firebaseApp)
  const db = getFirestore(firebaseApp)
  

  如果要兼容旧版本的firebase.initializeApp写法，可使用兼容包导入：

  import firebase from 'firebase/compat/app'
  import 'firebase/compat/auth'
  import 'firebase/compat/firestore'
  
  const firebaseConfig = { /* 你的配置 */ }
  const firebaseApp = firebase.initializeApp(firebaseConfig)
  

• 如果你使用Firebase 8.x及更低版本
  检查导入逻辑是否符合规范，必须先导入firebase/app再导入其他组件：

  import firebase from 'firebase/app'
  import 'firebase/auth'
  import 'firebase/firestore'
  
  const firebaseConfig = { /* 你的配置 */ }
  const firebaseApp = firebase.initializeApp(firebaseConfig)
  

2. 验证导入对象有效性 #

在firebaseService.js文件中调用initializeApp前添加一行打印，确认导入对象是否正确：

console.log('Firebase导入对象：', this.firebaseLib)

如果打印结果中不存在initializeApp方法，即可确认是导入逻辑错误，按照上述步骤调整即可。 #

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