【问题标题】:Firebase is not defined when connecting to Realtime Database Web连接到实时数据库 Web 时未定义 Firebase
【发布时间】:2025-11-27 05:00:01
【问题描述】:

我正在尝试将我的 Realtime Firebase 数据库连接到我的 Web 应用程序并最终在其中存储数据。

我在加载我的 HTML 文件时一直遇到同样的问题。我在控制台中得到的错误是Uncaught ReferenceError: firebase is not defined

这是我的脚本的样子:

<script type="module">

      import { initializeApp } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-app.js";
      import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-analytics.js";

      const firebaseConfig = {
        apiKey: "<api key>",
        authDomain: "<domain>",
        databaseURL: "<db url>",
        projectId: "<project id>",
        storageBucket: "<bucket>",
        messagingSenderId: "<id>",
        appId: "<app id>",
        measurementId: "<id>"
      };

      const app = initializeApp(firebaseConfig);
      const analytics = getAnalytics(app);

      var database = firebase.database();
      var postListRef = database.ref('posts');
      var newPostRef = postListRef.push();
      newPostRef.set({
        "post1": "testing"
      });

</script>

【问题讨论】:

  • 你打电话给firebase.database(),但它在哪里? :D
  • @Kid 我已经尝试导入getDatabase,但这并没有帮助。我应该添加另一个脚本标签吗?
  • 与其一一导入initializeApp和getAnalytics,尝试导入整个模块。 &lt;script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-app.js"&gt;&lt;/script&gt;
  • 还有,还有firebase-database.js
  • @Kid 我将脚本标签添加到头部并删除了导入,现在我还收到了 initializeApp 也未定义。

标签: javascript firebase firebase-realtime-database uncaught-reference-error


【解决方案1】:

您正在使用新的 v9 模块化 SDK 语法从 Firebase 导入函数。在该语法中,您拥有像 getDatabase() 这样的*函数,而不是像 firebase.database() 这样的对象。

您的 sn-p 中的实时数据库代码等效为:

var database = getDatabase(app);
var postListRef = ref(database, 'posts');
var newPostRef = push(postListRef);
set(newPostRef, {
  "post1": "testing"
});

我建议将 Firebase 文档保存在 reading and writing dataappending data to a listmodular upgrade guide 上,方便使用。


如果你有很多现成的实时数据库代码,可以先通过importing the compat path分步迁移:

import firebase from 'firebase/compat/app';
import 'firebase/compat/database';

【讨论】:

  • 感谢您的回答!对于导入,当我在脚本标签内导入时,它仅适用于 URL。要添加 getDatabase、ref 和 push 等内容,我应该导入什么?
  • 啊,没关系。我通过上面 Kid 的建议将它们全部导入。该代码现在有效。再次感谢! :)
  • D.没有尝试 9.0 所以我不好