JavaScript循环出现undefined，Firebase产品列表渲染HTML异常如何解决

• 字段取值错误：Firebase 查询返回的 doc 是文档快照对象，本身没有存储文档的自定义字段，所有字段都存放在 doc.data() 方法返回的对象中，你直接使用 doc.name 自然无法获取到值，输出为 undefined。
• 内容被循环覆盖：你在循环内部每次都对 wrapper.innerHTML 执行赋值操作，会清空之前已经插入的内容，仅保留当前循环的内容，就算取值正确最后也只会展示最后一条产品数据。
• 违反HTML ID规范：循环生成的所有h6标签都使用了同一个 id="name"，同一个页面内ID属性必须唯一，会导致后续DOM操作异常。

修改后的代码如下：

// 提前获取容器元素，避免循环内重复查询DOM
const wrapper = document.getElementById("wrapper");
// 先初始化内容为空
let allHTML = '';
db.collection("products").get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        // 从doc.data()中取对应字段，用文档id拼接避免ID重复
        const product = doc.data();
        allHTML += `<h6 id="name-${doc.id}">${product.name}</h6>`;
        console.log(doc.id, " => ", product);
    });
    // 循环结束后一次性插入到页面
    wrapper.innerHTML = allHTML;
});

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