Firebase 9.14.0实时数据库插入数据无反应，点击按钮无提示无报错

核心问题分析 #

你的代码存在几个关键问题，导致数据无法插入且无反馈：

1. 输入值获取时机错误
   你在页面加载时就获取了cropName和cropInformation的输入值，此时用户还未输入内容，点击按钮时使用的是空值或页面加载时的初始值，而非用户实时输入的内容。

2. 错误提示未输出具体信息
   catch块仅提示"unsucessful, error"，无法得知具体错误原因，比如权限限制、API调用异常等。

3. Firebase 9模块化导入验证
   Firebase 9采用模块化API，需确认是否正确导入getDatabase、ref、set这些方法，否则会导致函数未定义但无明显报错。

4. 数据库权限规则检查
   即使连接正常，如果数据库规则设置为仅允许认证用户写入，而当前未登录，也会导致写入失败且无提示（默认生产环境规则会拒绝所有写入操作）。

修复后的代码 #

// 确保正确导入Firebase 9模块（根据你的初始化逻辑调整）
import { getDatabase, ref, set } from "firebase/database";

function insertData(){
  // 点击按钮时实时获取输入值
  const crops = document.getElementById('cropName').value;
  const cropDetails = document.getElementById('cropInformation').value;

  // 先验证输入完整性
  if (!crops || !cropDetails) {
    alert("请填写完整的作物信息");
    return;
  }

  const database = getDatabase();
  set(ref(database, "Crops/"), {
    CropName: crops,
    CropDetails: cropDetails
  })
  .then(() => {
    alert("数据插入成功");
  })
  .catch((error) => {
    // 显示具体错误信息便于排查
    alert(`插入失败：${error.message}`);
  });
}

document.getElementById('addCrop').addEventListener('click', insertData);

额外检查项 #

• 权限规则：进入Firebase控制台，检查Realtime Database规则，开发阶段可临时设置为：

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

  注意：生产环境必须配置严格的权限规则，防止数据泄露。
• 初始化验证：确认Firebase初始化代码正确，getDatabase()能获取到有效的数据库实例。
• 控制台日志：打开浏览器开发者工具的Console面板，查看是否有隐藏的报错信息（如未捕获的ReferenceError）。

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