Firebase Realtime Database集成后网页无响应排查求助

我仔细检查了你的代码，发现几个核心问题导致功能失效——有些错误可能藏在控制台里没被你注意到，下面逐一拆解：

• 脚本标签格式错误：你把自定义代码写在了<script src="https://www.gstatic.com/firebasejs/6.6.0/firebase-database.js">标签内部，这会让浏览器把你的代码当成外部脚本的一部分解析，外部脚本加载完成后，内部代码根本不会被正确执行。正确做法是先闭合这个外部脚本标签，再新建一个script标签写自己的代码。

• 未定义的userId变量：代码里直接用了userId但完全没声明或赋值，这会抛出引用错误。你得先给这个变量设置具体值，比如var userId = "test-user-123";（替换成你数据库里实际存在的用户ID）。

• 异步操作处理逻辑错误：Firebase的once('value')是异步操作，它要等数据从服务器拉取完成后才会执行then里的回调。你的getTermine函数直接返回termine，但此时异步操作还没完成，termine要么未定义，要么是默认值，根本拿不到数据库里的真实数据。而且termine是then回调里的局部变量，外部代码根本访问不到它。

• document.write的不合理使用：就算异步操作完成后调用document.write，如果页面已经加载完毕，它会直接清空当前页面内容，这绝对不是你想要的效果，应该用DOM操作来更新指定元素的内容。

修正后的代码示例 #

<script src="https://www.gstatic.com/firebasejs/6.6.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.0/firebase-database.js"></script>
<script>
var config = {
  apiKey: "|||||||||||||||||||||||||||||||||||||",
  authDomain: "littleappsdatabase.firebaseapp.com",
  databaseURL: "https://littleappsdatabase.firebaseio.com",
  storageBucket: "littleappsdatabase.appspot.com"
};
firebase.initializeApp(config);
var database = firebase.database();

// 先定义实际的用户ID，替换成你数据库中存在的ID
var userId = "your-real-user-id";

function getTermine() {
  // 返回Promise，让调用者可以等待异步操作完成
  return firebase.database()
    .ref('/users/' + userId)
    .once('value')
    .then(function(snapshot) {
      return (snapshot.val() && snapshot.val().calendar) || 'Keine Termine vorhanden';
    });
}

// 调用异步函数，用then处理返回的结果
getTermine().then(function(list) {
  // 创建h4元素并添加到页面，替代document.write
  var heading = document.createElement('h4');
  heading.innerHTML = list.replace(';', '<br><br>');
  document.body.appendChild(heading);
});
</script>

额外提醒： #

1. 确保你在Firebase控制台里配置了正确的实时数据库规则，测试阶段可以暂时设置为{ "rules": { ".read": true, ".write": true } }，但正式环境一定要设置严格的安全规则，避免数据泄露。
2. 打开Chrome开发者工具控制台（按F12），查看是否有隐藏的错误提示，这是快速定位问题的关键。

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