Node.js从MySQL获取产品后插入HTML页面时出错求助

从错误截图来看，核心问题是**fillProducts函数仅被定义但未执行**，同时还可能存在DOM未完全加载时就获取容器元素导致的null引用问题，以下是具体修复方案：

修复后的完整代码 #

import { getAllProducts } from "../products.js"

// 等待DOM完全加载后再执行逻辑，避免容器元素获取失败
document.addEventListener('DOMContentLoaded', async () => {
    // 获取页面容器元素，同时做基础校验
    const contenedor_hamburguesa = document.getElementById("contenedor-hamburguesa");
    const contenedor_smash = document.getElementById("contenedor-smash");
    const contenedor_ensalada = document.getElementById("contenedor-ensalada");
    const contenedor_bebida = document.getElementById("contenedor-bebida");

    // 用对象映射替代多分支判断，代码更简洁易维护
    const categoryContainers = {
        hamburguesa: contenedor_hamburguesa,
        smash: contenedor_smash,
        ensalada: contenedor_ensalada,
        bebida: contenedor_bebida
    };

    // 提前校验容器是否存在，避免后续渲染报错
    Object.entries(categoryContainers).forEach(([category, container]) => {
        if (!container) {
            console.warn(`类别[${category}]对应的容器未找到，请检查HTML元素ID是否正确`);
        }
    });

    const fillProducts = async () => {
        try {
            const products = await getAllProducts();
            
            products.forEach(product => {
                const { categoria, nombre } = product;
                const targetContainer = categoryContainers[categoria];

                if (targetContainer && nombre) {
                    // 用createElement替代innerHTML+=，避免XSS风险且性能更优
                    const productElement = document.createElement('div');
                    productElement.textContent = nombre;
                    targetContainer.appendChild(productElement);
                } else {
                    console.warn(`产品[${nombre}]无法渲染：类别[${categoria}]无对应容器或产品名称缺失`);
                }
            });
        } catch (error) {
            console.error('产品渲染失败:', error);
        }
    };

    // 执行产品填充函数
    await fillProducts();
});

关键修复点 #

• 添加DOM加载监听：确保页面元素完全渲染后再获取容器，避免getElementById返回null。
• 执行填充函数：显式调用fillProducts()，解决函数未执行的核心报错。
• 优化容器匹配逻辑：用对象映射替代多分支if-else，提升代码可读性和可维护性。
• 替换DOM操作方式：用createElement+appendChild替代innerHTML +=，避免潜在XSS安全风险，同时减少DOM重排次数。
• 添加异常校验：增加容器存在性、产品字段完整性的校验，方便快速排查问题。

额外检查项 #

1. 确认后端接口http://localhost:4000/productos返回的数据格式正确，每个产品对象必须包含categoria和nombre字段。
2. 检查HTML中容器元素的ID是否与代码中使用的完全一致（注意大小写和拼写）。

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