如何从Firebase Database动态获取数据？请求排查代码读取错误

我正在学习在项目中使用Firebase Database，尝试实现动态获取数据，但读取数据时出现错误。仅通过视频教程和网络资料进行学习，对操作细节仍不明确。已尝试排查12小时以上但仍未解决问题，恳请帮忙定位代码中的实际错误。

数据库结构 #

我的代码 #

const db = getDatabase();
var tBody = document.querySelector("#tbody1");
var appointmentID = 0;
tBody.innerHTML = "";

function AddRequestToTable(name, email, phone, date, time, service, status) {
    let tRow = document.createElement("tr");
    let td1 = document.createElement("td");
    let td2 = document.createElement("td");
    let td3 = document.createElement("td");
    let td4 = document.createElement("td");
    let td5 = document.createElement("td");
    let td6 = document.createElement("td");
    let td7 = document.createElement("td");

    td1 = ++appointmentID;
    td2 = name;
    td3 = email;
    td4 = phone;
    td5 = date + " " + time;
    td6 = service;
    td7 = status;

    tRow.appendChild(td1);
    tRow.appendChild(td2);
    tRow.appendChild(td3);
    tRow.appendChild(td4);
    tRow.appendChild(td5);
    tRow.appendChild(td6);
    tRow.appendChild(td7);

    tBody.appendChild(tRow);
}

function AddAllRequeststoTable(AppointmentRequests) {
    tBody.innerHTML = "";

    AppointmentRequests.array.forEach((element) => {
        AddRequestToTable(
            element.name,
            element.email,
            element.phone,
            element.date,
            element.time,
            element.service,
            element.status,
        );
    });
}

function GetAllDataOnce() {
    const dbRef = ref(db, "appointmentForm");

    get(dbRef, child(db)) = ((snapshot) => {
        var requests = [];

        snapshot.forEach((childSnapshot) => {
            requests.push(childSnapshot.val());
        });
        AddAllRequeststoTable(requests);
    });
}

window.onload = GetAllDataOnce();

报错位置 #

function GetAllDataOnce() {
    const dbRef = ref(db, "appointmentForm");

    get(dbRef, child(db)) = ((snapshot) => {
        var requests = [];

        snapshot.forEach((childSnapshot) => {
            requests.push(childSnapshot.val());
        });
        AddAllRequeststoTable(requests);
    });
}

错误分析与修复方案 #

1. GetAllDataOnce 函数的语法与异步调用错误 #

• get() 方法仅需传入数据库引用，不需要第二个 child(db) 参数；
• get() 是异步函数，需通过 .then() 处理返回的快照，而非直接赋值（原代码的赋值操作是语法错误）。

修复后的 GetAllDataOnce：

function GetAllDataOnce() {
    const dbRef = ref(db, "appointmentForm");

    get(dbRef)
        .then((snapshot) => {
            var requests = [];
            snapshot.forEach((childSnapshot) => {
                requests.push(childSnapshot.val());
            });
            AddAllRequeststoTable(requests);
        })
        .catch((error) => {
            console.error("读取数据失败:", error);
        });
}

2. AddAllRequeststoTable 函数的数组遍历错误 #

AppointmentRequests 本身就是数组，直接调用 .forEach() 即可，无需额外加 .array。

修复后的 AddAllRequeststoTable：

function AddAllRequeststoTable(AppointmentRequests) {
    tBody.innerHTML = "";

    AppointmentRequests.forEach((element) => {
        AddRequestToTable(
            element.name,
            element.email,
            element.phone,
            element.date,
            element.time,
            element.service,
            element.status
        );
    });
}

3. AddRequestToTable 函数的DOM元素处理错误 #

创建 <td> 元素后，直接覆盖变量会丢失DOM节点，需通过 textContent 赋值内容，再将DOM元素添加到行中。

修复后的 AddRequestToTable：

function AddRequestToTable(name, email, phone, date, time, service, status) {
    let tRow = document.createElement("tr");
    let td1 = document.createElement("td");
    let td2 = document.createElement("td");
    let td3 = document.createElement("td");
    let td4 = document.createElement("td");
    let td5 = document.createElement("td");
    let td6 = document.createElement("td");
    let td7 = document.createElement("td");

    td1.textContent = ++appointmentID;
    td2.textContent = name;
    td3.textContent = email;
    td4.textContent = phone;
    td5.textContent = date + " " + time;
    td6.textContent = service;
    td7.textContent = status;

    tRow.appendChild(td1);
    tRow.appendChild(td2);
    tRow.appendChild(td3);
    tRow.appendChild(td4);
    tRow.appendChild(td5);
    tRow.appendChild(td6);
    tRow.appendChild(td7);

    tBody.appendChild(tRow);
}

4. window.onload 赋值错误 #

需赋值函数引用而非立即调用函数，否则页面加载前就会执行 GetAllDataOnce，可能导致DOM未初始化完成。

修复后的代码：

window.onload = GetAllDataOnce;

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