Firebase 实时数据库不显示在 html 中答案

【问题标题】：Firebase Realtime Database doesn't display in htmlFirebase 实时数据库不显示在 html 中
【发布时间】：2020-11-27 11:08:01
【问题描述】：

我有一个 Firebase 实时数据库，我试图在 html 页面上显示其中的任何内容。我似乎无法让它做任何事情。我将权限设置为完全开放，并且遵循了几个教程，但仍然一无所获。

<html>
  <head>
    <meta charset="utf-8"/>
    <title>Firebase example</title>
  </head>
  <body>
    <h1>Firebase example</h1>
    <pre id='data'></pre>

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-database.js"></script>

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "*",
    authDomain: "*",
    databaseURL: "*",
    projectId: "*",
    storageBucket: "*",
    messagingSenderId: "*",
    appId: "*",
    measurementId: "*"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

  var ref = firebase.database().ref();
  ref.on("value", function(snapshot){
    output.innerHTML = JSON.stringify(snapshot.val(), null, 2);
  });

  </script>
  </body>
</html>

如果我在那里发出警报，我可以看到代码似乎失败了

var ref = firebase.database().ref();

但我不知道为什么。有人可以扔我骨头并指出我正确的方向吗？如果我能达到它显示所有内容的地步，我可以从那里弄清楚，但我在这一点上没有取得任何进展，并且真的可以在这方面使用一些指导。

【问题讨论】：

在 Stack Overflow 上提问时，您应该会显示可能在浏览器控制台中看到的错误消息。代码故障应始终伴随调试信息。
没有错误信息。该页面在浏览器中只是空白。
检查所有 API 调用是否有错误。 on() 可能会失败，你永远不会知道。还包括您所做的任何日志记录的结果，这样我们就可以知道您尝试做什么来调试它。如果您解释这段代码应该做什么，也会有所帮助。我们看不到output 是什么。
我也不知道输出是什么。我只是在 chrome 中打开 html 文件。我没有任何日志记录或调试。我以前从未做过任何 javascript，这就是为什么我在努力解决它。
如果您不知道自己的代码应该做什么，Stack Overflow 不适合您。我建议从谷歌提供的官方文档和代码实验室重新开始。如果您是 JavaScript 新手，在向其中添加云托管数据库服务之前，您可能应该花时间自己学习它。在开始使用 Firebase 之前，您应该了解 JavaScript。

标签： javascript firebase firebase-realtime-database

【解决方案1】：

首先，删除它。它很旧，没有必要：

<script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>

其次，您需要为实时数据库 API 添加脚本包含。它的版本必须与您为 firebase-app 添加的版本相匹配。

<script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-database.js"></script>

最值得关注的是文档。坚持这一点，因为旧教程会给出与文档中正确信息相冲突的糟糕建议。

【讨论】：

我进行了这些更改，现在它似乎运行了所有代码，但仍然没有显示任何内容。我试过关注文档，但最终在同一个端点 - 一个空白的浏览器窗口。所以我在某个地方遗漏了一些东西。