Firebase初始化报错：Uncaught ReferenceError: firebase is not defined求助

你遇到的Uncaught ReferenceError: firebase is not defined错误，核心原因有两个：

1. 版本冲突：同时引入了Firebase v2.2.1（旧版全局API）和v9.22.1（新版模块化API），两个版本的脚本相互干扰，导致全局firebase对象无法正常初始化。
2. 语法不兼容：Firebase v9+默认采用模块化架构，不再暴露全局firebase变量，你使用的是旧版本的初始化语法，和v9不匹配。

第一步：清理冲突资源 #

• 删除旧版本Firebase脚本：<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
• 删除重复的jQuery旧版本：<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>，保留jQuery 3.7.0即可。

第二步：选择v9的使用方式（二选一） #

选项1：使用官方推荐的模块化API

这种方式更符合现代前端规范，打包体积更小：

<!-- 保留v9核心脚本 -->
<script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-auth.js"></script>

<script src="https://code.jquery.com/jquery-3.7.0.js"></script>

<script type="module">
  // 按需导入Firebase方法
  import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js';
  import { getFirestore } from 'https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore.js';
  import { getAuth } from 'https://www.gstatic.com/firebasejs/9.22.1/firebase-auth.js';

  // Firebase配置
  const firebaseConfig = {
    apiKey: "{{ config('services.firebase.apiKey') }}",
    authDomain: "{{ config('services.firebase.authDomain') }}",
    projectId: "{{ config('services.firebase.projectId') }}",
    storageBucket: "{{ config('services.firebase.storageBucket') }}",
    messagingSenderId: "{{ config('services.firebase.messagingSenderId') }}",
    appId: "{{ config('services.firebase.appId') }}",
    measurementId: "{{ config('services.firebase.measurementId') }}"
  };

  // 初始化Firebase应用
  const app = initializeApp(firebaseConfig);
  // 初始化Firestore和Auth实例
  const db = getFirestore(app);
  const auth = getAuth(app);

  // 后续可通过db、auth操作数据库和认证
</script>

选项2：使用兼容模式（保留旧版全局语法）

如果不想大规模修改代码，可以改用v9的兼容脚本，继续使用firebase全局对象：

<!-- 替换为v9兼容版脚本 -->
<script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-auth-compat.js"></script>

<script src="https://code.jquery.com/jquery-3.7.0.js"></script>

<script>
  // Firebase配置
  var firebaseConfig = {
    apiKey: "{{ config('services.firebase.apiKey') }}",
    authDomain: "{{ config('services.firebase.authDomain') }}",
    projectId: "{{ config('services.firebase.projectId') }}",
    storageBucket: "{{ config('services.firebase.storageBucket') }}",
    messagingSenderId: "{{ config('services.firebase.messagingSenderId') }}",
    appId: "{{ config('services.firebase.appId') }}",
    measurementId: "{{ config('services.firebase.measurementId') }}"
  };

  // 初始化Firebase（现在可正常使用全局firebase对象）
  firebase.initializeApp(firebaseConfig);
  // 后续操作示例
  const db = firebase.firestore();
  const auth = firebase.auth();
</script>

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