无法将表单数据保存至Firebase实时数据库求助

问题概述 #

无法将表单数据保存到Firebase实时数据库，网站运行无报错，但Firebase后台始终显示null，数据从未更新。

可能原因及解决方法 #

1. 模块作用域导致函数无法调用 #

你的JS文件使用了type="module"，模块内定义的ordernow函数默认不会暴露到全局作用域，HTML按钮的onclick="ordernow()"无法找到该函数，导致写入逻辑根本没执行。

解决方法：
将ordernow函数挂载到window对象，使其全局可访问：

window.ordernow = function() {
  // 原函数内的所有代码
}

或者改用事件监听绑定按钮（推荐）：

// 在JS文件末尾添加
document.getElementById('submitBtn').addEventListener('click', ordernow);

同时修改HTML按钮，添加ID并移除onclick属性：

<button type="button" id="submitBtn">שליחת טופס</button>

2. Firebase数据库规则权限限制 #

默认的实时数据库规则仅允许已认证用户读写，若未配置认证或规则为只读，会导致写入失败（无报错但数据不更新）。

解决方法：
临时修改数据库规则（测试环境），允许公开读写：

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

注意：生产环境必须修改为安全规则，比如限制认证用户读写，或基于路径的权限控制。

3. Firebase配置存在语法错误 #

你的firebaseConfig中apiKey和authDomain的引号未闭合：

apiKey: "***************************,  // 缺少闭合引号
authDomain: "***************************,  // 缺少闭合引号

这会导致Firebase初始化失败，控制台会有语法错误，需修正为：

apiKey: "***************************",
authDomain: "***************************",

4. 数据路径无效或字段问题 #

• 若phone1为空，写入路径client/ + phone1会变成client/，可能覆盖节点或写入无效；建议添加表单校验，或使用push()生成唯一ID：

  set(ref(db, 'client/' + push(ref(db)).key), {
    // 数据内容
  })
  

• 字段拼写错误：比如Winows应改为Windows，sStreet应改为Street，虽然不影响写入，但会导致字段名不符合预期。

修正后的JS代码示例 #

// firebase server data
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js";
import { getDatabase, ref, set, push } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-database.js";
const firebaseConfig = {
  apiKey: "***************************",
  authDomain: "***************************",
  databaseURL: "***************************",
  projectId: "***************************",
  storageBucket: "***************************",
  messagingSenderId: "***************************",
  appId: "***************************"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

// 挂载到window全局，或使用事件监听
window.ordernow = function(){
  // 获取表单数据
  var floorNum = document.getElementById('floorNum').value;
  var floorSize = document.getElementById('floorSize').value;
  var lobbyNum = document.getElementById('lobbyNum').value;
  var lobbySize = document.getElementById('lobbySize').value;
  var windowsNum = document.getElementById('windowsNum').value;
  var parkingLot = document.getElementById('parkingLot').value;
  var parkingSize = document.getElementById('parkingSize').value;
  var garbageRoom = document.getElementById('garbageRoom').value;
  var garbageSize = document.getElementById('garbageSize').value;
  var garden = document.getElementById('garden').value;
  var gardenSize = document.getElementById('gardenSize').value;
  var onceAWeek = document.getElementById('onceAWeek').checked;
  var twiceAWeek = document.getElementById('twiceAWeek').checked;
  var ThreeAWeek = document.getElementById('ThreeAWeek').checked;
  var CleaningPerWeek = onceAWeek ? "lowonceAWeek" : (twiceAWeek ? "twiceAWeek" : (ThreeAWeek ? "ThreeAWeek" : "none"));
  var city = document.getElementById('city').value;
  var street = document.getElementById('street').value;
  var buildingNum = document.getElementById('buildingNum').value;
  var fName1 = document.getElementById('fName1').value;
  var lName1 = document.getElementById('lName1').value;
  var phone1 = document.getElementById('phone1').value;
  var email1 = document.getElementById('email1').value;
  var fName2 = document.getElementById('fName2').value;
  var lName2 = document.getElementById('lName2').value;
  var phone2 = document.getElementById('phone2').value;
  var email2 = document.getElementById('email2').value;

  // 用push生成唯一ID，避免phone1为空的问题
  const newClientRef = push(ref(db, 'client'));
  set(newClientRef, {
    Contact1: {FirstName: fName1, LastName:lName1, PhoneNumber: phone1,email: email1},
    Contact2: {FirstName: fName2, LastName:lName2, PhoneNumber: phone2,email: email2},
    Address: {City: city, Street: street, BuildingNum: buildingNum},
    BuildingData: {Floors: floorNum,FloorSize: floorSize,Lobbys: lobbyNum,Lobbysize: lobbySize,
    Windows: windowsNum, ParkingLot: parkingLot, ParkingLotSize: parkingSize, GarbageRoom: garbageRoom,
    GarbageRoomSize: garbageSize,Garden: garden,GardenSize: gardenSize},
    CleaningPerWeek:CleaningPerWeek
  })
  .then(() => {
    console.log('数据已成功写入Firebase');
  })
  .catch((error) => {
    console.error('写入Firebase失败: ', error);
  });
}

验证步骤 #

1. 打开浏览器控制台（F12），提交表单后查看是否有报错信息；
2. 检查Firebase数据库规则是否正确配置；
3. 确认ordernow函数被正确调用，可在函数开头添加console.log('函数已触发')验证。

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