Firebase Realtime Database写入异常：仅成功写入一次后续无响应

问题核心原因 #

你的代码存在两个关键问题导致重复写入失败：

• 表单默认提交行为未拦截：点击提交按钮时，浏览器会自动触发表单提交并刷新页面，页面重载后Firebase初始化流程重复执行，造成写入失败的假象。
• 根节点覆盖式写入：每次调用set()都会直接覆盖数据库根节点的全部数据，虽然操作本身会执行，但结合页面刷新问题，会让你误以为写入未生效。

修复方案 #

1. 阻止表单默认刷新行为 #

修改save函数，添加事件参数并调用preventDefault()，避免页面刷新：

function save(e){            
    // 拦截表单默认提交动作
    e.preventDefault();
    set(ref(db, "/"), {
        Name: fname.value
    })
}

2. 优化写入逻辑（可选但推荐） #

如果不想每次覆盖根节点数据，可以用push()生成唯一子节点，保留所有提交记录：

// 导入push方法
import {getDatabase, set, push, ref} from "https://www.gstatic.com/firebasejs/10.4.0/firebase-database.js"

// ... 其他代码不变

function save(e){            
    e.preventDefault();
    // 生成唯一子节点路径，避免覆盖原有数据
    const newEntryRef = push(ref(db, "/submitted-names"));
    set(newEntryRef, {
        Name: fname.value
    })
}

3. 添加错误排查机制 #

为set()方法添加回调，捕获写入错误并打印日志，方便定位问题：

function save(e){            
    e.preventDefault();
    set(ref(db, "/"), {
        Name: fname.value
    }).then(() => {
        console.log("数据写入成功");
        // 可选：清空输入框
        fname.value = "";
    }).catch((error) => {
        console.error("写入失败原因：", error);
    })
}

4. 检查数据库安全规则 #

如果以上操作后仍无法写入，确认Firebase数据库规则允许写入（测试阶段可临时放开权限）：

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

注意：正式上线前必须修改为严格的权限规则，防止数据泄露。

完整修复代码 #

<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.4.0/firebase-app.js";

  const firebaseConfig = {      
    apiKey: "AIzaSyAEGiSKDCg0nkrSxHshqxPEUWxtGI1NP7Q",      
    authDomain: "wrud-d63af.firebaseapp.com",      
    databaseURL: "https://wrud-d63af-default-rtdb.firebaseio.com",      
    projectId: "wrud-d63af",      
    storageBucket: "wrud-d63af.appspot.com",      
    messagingSenderId: "491961850138",      
    appId: "1:491961850138:web:2468aff8d84e08c40ff4a3"      
  };
            
  const app = initializeApp(firebaseConfig);
  
  import {getDatabase, set, ref} from "https://www.gstatic.com/firebasejs/10.4.0/firebase-database.js"
  
  const db = getDatabase()
  
  var fname = document.getElementById("fname")
  var submitBtn = document.getElementById("submitBtn")
            
  function save(e){            
      e.preventDefault();
      set(ref(db, "/"), {
          Name: fname.value
      }).then(() => {
          console.log("数据写入成功");
          fname.value = "";
      }).catch((error) => {
          console.error("写入失败原因：", error);
      })
  }
            
  submitBtn.addEventListener('click', save)                 
</script>

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