Vue连接Firebase报initializeApp未提供projectId错误如何解决

• Firebase SDK版本与代码写法不兼容：你最初使用的是Firebase v8及更低版本的命名空间式写法，后续修改的是v9+版本的模块化写法，如果项目依赖中安装的SDK版本和你使用的语法不匹配，会导致初始化参数读取异常。
• 配置参数未正确传入：如果粘贴配置时不小心漏填了projectId字段的真实值，或者存在拼写错误（比如大小写错误写成ProjectId），也会触发该报错。
• 修改配置后未重启开发服务：Vue的本地开发服务不会热更新配置类文件的修改，改完firebase.js后没有重启服务，运行的仍然是旧的错误代码。
• v9版本代码缺漏逻辑：你修改后的v9版本代码既没有导入getAnalytics方法，也没有导出firestore实例，其他文件引入旧的db实例时会重复触发初始化逻辑，导致参数读取错误。

首先打开项目package.json文件，确认firebase依赖的版本号，根据版本选择对应的修复方案：

版本为v8及更低版本 #

保留原来的代码写法，按以下步骤操作：

1. 核对firebaseConfig中的projectId字段拼写正确，取值为Firebase控制台复制的真实项目ID，没有占位符或空值
2. 停止当前运行的本地开发服务，重新执行启动命令（一般为npm run serve或yarn serve）
3. 确认项目中没有其他文件重复调用firebase.initializeApp()方法，多次初始化会导致参数丢失

版本为v9及更高版本 #

统一使用模块化写法，将firebase.js修改为如下内容：

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
// 如果不需要 analytics 可以直接删除相关代码，不必强制引入
// import { getAnalytics } from "firebase/analytics";

const firebaseConfig = {
  apiKey: "你的真实apiKey",
  authDomain: "你的真实authDomain",
  projectId: "你的真实projectId",
  storageBucket: "你的真实storageBucket",
  messagingSenderId: "你的真实messagingSenderId",
  appId: "你的真实appId",
  // 不用analytics可删除该行
  // measurementId: "你的真实measurementId"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// 不用analytics可删除该行
// const analytics = getAnalytics(app);

export default db

修改完成后重启本地开发服务即可。

如果完成上述操作后仍然报错，可以在初始化代码前加一行console.log(firebaseConfig)，查看控制台打印的配置对象中projectId是否正常有值，快速定位配置赋值错误问题。

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