为何我的数据无法存储到Firebase实时数据库？

问题描述 #

我正在为Web应用制作注册页面，需将数据发送至Firebase数据库。已按照Firebase官方文档的写入数据指引操作，但数据始终无法写入成功，数据库控制台仅显示null，且浏览器控制台无任何报错信息。

相关代码 #

HTML部分 #

<button id="signUpButton" onclick="confirmData()">Sign Up!</button>
<script type="module" src="/backend/database.js"></script>

JavaScript部分 #

//import and initialize database
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.2/firebase-app.js";
import { getDatabase, ref, set  } from "https://www.gstatic.com/firebasejs/9.22.2/firebase-database.js";

const firebaseConfig = {
  apiKey: "AIzaSyDJdI7Sgr7ZGo3Do6NVswgs1UvjVcQUZbs",
  authDomain: "bakerstoolbox-9ca91.firebaseapp.com",
  databaseURL: "https://bakerstoolbox-9ca91-default-rtdb.firebaseio.com",
  projectId: "bakerstoolbox-9ca91",
  storageBucket: "bakerstoolbox-9ca91.appspot.com",
  messagingSenderId: "175444196196",
  appId: "1:175444196196:web:f6314c643c71315b5f1871"
};

const app = initializeApp(firebaseConfig);
const database = getDatabase(app);

//get user sign up data
var email = document.getElementById("email");
var phone = document.getElementById("phone-number");
var firstName = document.getElementById("firstName");
var lastName = document.getElementById("lastName");

//button functions
const signUpButton = document.getElementById("signUpButton");
signUpButton.addEventListener("click", signUpNewUser);

//sign up a new user
function signUpNewUser(){
    set(ref(database, 'users/'), {
        userEmail : email,
        userPhoneNum : phone,
        userFirstName : firstName,
        userLastName : lastName
    });
    console.log("DEBUGGING")
}

问题原因与修复方案 #

1. 按钮事件绑定冲突 #

HTML按钮上同时设置了onclick="confirmData()"，而JS中又通过addEventListener绑定了signUpNewUser函数，这会导致点击按钮时触发未定义的confirmData函数，干扰正常写入逻辑。

修复：移除HTML按钮的onclick属性，保留JS中的事件绑定：

<button id="signUpButton">Sign Up!</button>

2. 未获取输入框的实际值 #

当前代码直接将DOM元素对象存入数据库，Firebase无法将DOM对象序列化为有效数据，最终存储为null。需要获取输入框的.value属性才能拿到用户输入内容。

修复：修改signUpNewUser函数，使用元素的.value：

function signUpNewUser(){
    set(ref(database, 'users/'), {
        userEmail : email.value,
        userPhoneNum : phone.value,
        userFirstName : firstName.value,
        userLastName : lastName.value
    })
    .then(() => {
        console.log("数据写入成功");
    })
    .catch((error) => {
        console.error("写入失败：", error);
    });
}

3. 添加错误捕获逻辑 #

原代码没有对set操作添加错误处理，即便存在权限或网络问题也无法在控制台看到报错。添加.then()和.catch()可以明确操作结果，方便排查问题。

额外建议 #

• 检查Firebase数据库的规则设置，确保当前环境下允许写入操作（开发阶段可暂时设置为{ "rules": { ".read": true, ".write": true } }，上线前需修改为安全规则）。
• 确认输入框的id与JS中getElementById的参数完全匹配，避免因ID不匹配导致获取到null元素。

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