Firestore用forEach拉取数据渲染HTML仅显示单条记录如何解决

云原生阿岚

2026-9-24

核心问题

HTML中仅定义了1组固定的卡片结构，且id属性全局唯一，循环中每次通过getElementById获取的都是同一个元素，新赋值会覆盖旧值，因此最终只会显示最后一条文档的数据。

修改方案

1. 调整HTML结构

移除固定的卡片内容，预留容器存放动态生成的卡片，同时用template标签定义可复用的卡片模板：

<section class="teams" id="teamsContainer">
    <!-- 所有球队卡片会动态插入到该容器中 -->
</section>
<!-- 球队卡片模板，默认不渲染 -->
<template id="teamCardTemplate">
    <article>
        <h1 class="team-names"></h1>
        <div class="team-line"></div>
        <img class="team-image">
    </article>
</template>

2. 调整JavaScript逻辑

循环拉取到的文档时，每次克隆模板、填充数据后插入到容器中：

const i = query(collection(db, "teams"));
const teamsContainer = document.getElementById('teamsContainer');
const cardTemplate = document.getElementById('teamCardTemplate');
const unsubscribe = onSnapshot(i, (querySnapshot) => {
    // 先清空容器，避免数据变更时堆叠旧卡片
    teamsContainer.innerHTML = '';
    querySnapshot.forEach((doc) => {
        const docData = doc.data();
        // 深度克隆模板节点
        const cardNode = cardTemplate.content.cloneNode(true);
        // 填充当前文档数据
        cardNode.querySelector('.team-names').innerText = docData.ageGroup;
        cardNode.querySelector('.team-image').src = docData.teamImage;
        // 插入到页面容器
        teamsContainer.appendChild(cardNode);
        console.log("Current data: ", docData);
    });
});