无法向Firebase实时数据库推送数据，请求代码修复

你的代码存在两个核心问题，导致点击按钮后无响应，以下是具体修复方案：

问题分析 #

• 提前获取输入框值：原代码中const f_id = document.getElementById("id").value;在页面加载时就执行，此时输入框为空，且f_id存储的是字符串而非DOM元素，后续调用f_id.value会直接报错（字符串没有value属性）。
• 潜在的数据库权限问题：Firebase实时数据库默认仅允许认证用户写入数据，若未配置用户认证，会导致写入请求被拒绝。

修复后的完整代码 #

<form>
    <input type="text" id="id"><br>
    <button id="addbtn">make_nfc</button>
</form>
<script src="https://www.gstatic.com/firebasejs/10.6.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.6.0/firebase-database.js"></script>
<script>
    const firebaseConfig = {
        apiKey: "AIzaSyD4QdzB3fd2FTw2bZlEiR5_HW9x1O_9mH8",
        authDomain: "pet-care-20a90.firebaseapp.com",
        databaseURL: "https://pet-care-20a90-default-rtdb.firebaseio.com",
        projectId: "pet-care-20a90",
        storageBucket: "pet-care-20a90.appspot.com",
        messagingSenderId: "752435918706",
        appId: "1:752435918706:web:c87a176a2f47d757c4cfeb"
    };
    firebase.initializeApp(firebaseConfig);
    const database = firebase.database();
    const idInput = document.getElementById("id"); // 存储输入框DOM元素
    const addbtn = document.getElementById("addbtn");
    
    addbtn.addEventListener('click', (e) => {
         e.preventDefault();
         const f_id = idInput.value; // 点击按钮时才获取当前输入值
         
         // 可选：添加非空校验，避免推送空值
         if (!f_id) {
             console.log("请输入内容");
             return;
         }
         
         // 调用set方法并添加回调，方便排查问题
         database.ref('id').set(f_id)
             .then(() => {
                 console.log("数据推送成功");
             })
             .catch((error) => {
                 console.error("推送失败：", error);
             });
    });
</script>

数据库权限调整（临时方案） #

若未配置用户认证，可临时修改Firebase控制台的实时数据库规则为：

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

注意：生产环境必须修改为安全规则（比如仅允许认证用户读写），防止数据泄露。

内容的提问来源于stack exchange，提问作者Lê Gia Huy 93