HTML文件中JavaScript代码无法写入Firebase数据库求助

以下是针对你的代码无法正常写入Firebase数据库的问题分析及修复方案：

问题代码 #

<html>
<style>
  h1{
    text-align:center;
  }
  #div1{
    text-align:center;
  }
</style>
<body>
  <h1>SEND A MESSAGE</h1>
  <div id="div1">
    <input id="textbox1">
    <button id="btn1">Send</button>
  </div>
</body>
<script src="firebase-app.js"></script>
<script src="firebase-database.js"></script>
<script src="firebase-auth.js"></script>
<script id="MainScript">
  const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
  };
  firebase.initializeApp(firebaseConfig);

  document.getElementById("btn1").onclick = function(){
    firebase.database().ref("Message/"+"name").set({
      message: "message",
      id: "hy"
    });
  }
</script>
</html>

核心问题及修复步骤 #

1. Firebase配置信息为空 #

你的firebaseConfig所有字段都是空字符串，必须填入从Firebase控制台获取的真实项目配置。登录Firebase控制台，进入对应项目，在"项目设置"中找到"SDK设置和配置"，复制完整的配置信息替换到代码中。

2. SDK文件路径或加载方式错误 #

如果本地的firebase-app.js等文件路径不正确，会导致SDK加载失败。建议改用Firebase官方CDN链接加载SDK，替换原有script标签：

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

（版本号可根据Firebase最新稳定版调整）

3. 数据库读写规则限制 #

Firebase实时数据库默认仅允许授权用户读写。如果未配置规则，未登录状态下无法写入数据。可以临时设置测试规则（上线前务必改回安全规则）：
在Firebase控制台的"实时数据库"→"规则"中修改为：

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

生产环境建议配置基于身份验证的规则，例如仅允许登录用户写入：

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

4. 未获取用户输入内容 #

原代码写入的是固定字符串，没有读取输入框的内容。修改点击事件代码，获取输入值并处理：

document.getElementById("btn1").onclick = function(){
  const inputValue = document.getElementById("textbox1").value.trim();
  if (!inputValue) {
    alert("请输入内容");
    return;
  }
  // 使用push()生成唯一ID，避免覆盖已有数据
  firebase.database().ref("Message").push({
    message: inputValue,
    id: "hy" // 可替换为实际用户标识，如auth.currentUser.uid
  })
  .then(() => {
    console.log("数据写入成功");
    document.getElementById("textbox1").value = ""; // 清空输入框
  })
  .catch(error => {
    console.error("写入失败：", error);
  });
}

注：使用push()而非set()到固定路径，可避免每次点击覆盖同一条数据，生成唯一的子节点ID。

5. 缺少错误处理 #

原代码没有处理数据库操作的Promise结果，无法排查失败原因。添加.then()和.catch()可以在控制台查看操作状态，快速定位问题。

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