HTML页面从Firestore分页取数据时遇container null错误求助

1. 首先解决TypeError: container is null #

这个错误的核心是JS代码执行时，DOM中还没有.container元素，或者HTML里未定义该元素：

• 检查HTML结构：确保页面存在<div class="container"></div>元素，且class名称拼写完全匹配（区分大小写）。
• 调整代码执行时机：将DOM元素查询逻辑移到DOMContentLoaded事件内部，或者把script标签放在HTML的</body>标签之前，确保DOM加载完成后再执行元素查询。

2. Firestore分页逻辑修正 #

你的代码未实现真正的分页，还存在变量作用域、异步逻辑混乱的问题，以下是修正后的完整代码及关键说明：

修正后的代码 #

// 所有逻辑放在DOM加载完成后执行
window.addEventListener('DOMContentLoaded', async () => {
    const container = document.querySelector('.container');
    const loading = document.querySelector('.loading');
    const loadMore = document.querySelector('.load-more button');
    let latestDoc = null;
    const PAGE_SIZE = 5; // 自定义每页加载的文档数量

    // 分页获取数据的核心函数
    const getNextReviews = async () => {
        loading.classList.add('active');
        try {
            // 基础查询：限制每页数量
            let query = db.collection("noodles_nv").limit(PAGE_SIZE);
            // 如果有上一页的最后文档，用startAfter实现分页偏移
            if (latestDoc) {
                query = query.startAfter(latestDoc);
            }
            const querySnapshot = await query.get();
            
            // 无更多数据时移除事件监听
            if (querySnapshot.empty) {
                loadMore.removeEventListener('click', handleClick);
                container.removeEventListener('scroll', handleScroll);
                loading.classList.remove('active');
                return;
            }

            // 渲染数据（根据需求选择渲染目标，这里保留container）
            querySnapshot.forEach(doc => {
                const data = doc.data();
                const template = `
                    <div class="card">
                        <h2>${data.hasImage ? '含图片' : '无图片'}</h2>
                        <p>分类：${data.itemCategory}</p>
                        <p>名称：${data.itemName}</p>                
                    </div>
                `;
                container.innerHTML += template;
                console.log(doc.id, " => ", data);
            });

            // 更新上一页的最后文档记录
            latestDoc = querySnapshot.docs[querySnapshot.docs.length - 1];
        } catch (err) {
            console.error('加载数据失败:', err);
        } finally {
            // 无论请求成功失败，都移除加载状态
            loading.classList.remove('active');
        }
    };

    // 点击加载更多事件
    const handleClick = () => getNextReviews();
    loadMore.addEventListener('click', handleClick);

    // 滚动加载事件
    const handleScroll = () => {
        const triggerHeight = container.scrollTop + container.offsetHeight;
        if (triggerHeight >= container.scrollHeight) {
            handleClick();
        }
    };
    container.addEventListener('scroll', handleScroll);

    // 首次加载数据
    await getNextReviews();
});

关键修正点 #

• 实现真正分页：用limit()限制每页数量，startAfter(latestDoc)从上次查询的最后一个文档开始加载，避免重复获取数据。
• 规范异步逻辑：使用async/await替代then链，搭配try/catch/finally处理错误和加载状态，代码逻辑更清晰。
• 修复变量作用域：将DOM元素、分页变量都放在DOMContentLoaded内部，避免全局变量污染，同时确保变量能正确访问。
• 移除无效代码：删除了重复的table.innerHTML += template（若需渲染到表格可自行调整模板），以及外部无法访问的template、data引用。
• 正确控制加载状态：在请求发起前添加loading类，请求完成后统一移除，避免加载状态异常。

3. 额外注意事项 #

• 确保Firestore初始化代码已正确执行（db变量已定义）。
• 根据实际字段调整模板中的数据展示（比如data.hasImage是布尔值，转成友好文本；原代码语义不符的文本已调整）。
• 滚动加载需确保.container元素设置了overflow: auto和固定高度，否则无法触发scroll事件。

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