Firebase数据读取至表格显示undefined，求解决自动生成键下名称获取问题

问题根源 #

你代码中使用childData.value获取数据，但从问题描述来看，你的FirebaseSpinner节点下的自动生成子节点，要么是直接存储的基础类型值（字符串/数字），要么字段名并非value，导致读取不到对应数据从而显示undefined。另外你拼接的HTML标签存在未闭合问题，也会导致DOM结构异常。

修正方案 #

场景1：自动生成子节点直接存储基础值（如字符串） #

如果Spinner下的每个自动键节点直接存的是字符串或数字，直接使用childSnapshot.val()返回的结果即可，无需.value：

getData.addEventListener("click", (e) => {
    $("#dataTable td").remove();
    const dbRef = ref(db, "Spinner");
    onValue(dbRef, (snapshot) => {
        snapshot.forEach((childSnapshot) => {
            const childData = childSnapshot.val();
            // 直接使用childData，补全闭合的HTML标签
            var row = `<tr><td>${childData || "无数据"}</td></tr>`;
            $(row).appendTo("#dataTable")
        });
    }, {
        onlyOnce: true,
    });
})

场景2：自动生成子节点是对象（含自定义字段） #

如果每个自动键节点是对象（比如包含name/content等字段），需要使用对应的字段名读取：

getData.addEventListener("click", (e) => {
    $("#dataTable td").remove();
    const dbRef = ref(db, "Spinner");
    onValue(dbRef, (snapshot) => {
        snapshot.forEach((childSnapshot) => {
            const childData = childSnapshot.val();
            // 替换成你数据库中实际的字段名，比如childData.name
            var row = `<tr><td>${childData.name || "无数据"}</td></tr>`;
            $(row).appendTo("#dataTable")
        });
    }, {
        onlyOnce: true,
    });
})

调试建议 #

• 在代码中添加console.log(childData)，查看控制台输出的实际数据结构，确认字段名称是否匹配
• 检查Firebase数据库规则，确保当前用户拥有Spinner节点的读取权限，权限不足也可能导致数据获取异常

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