Express中单独渲染嵌套EJS文件报错及条件渲染问题咨询

错误原因 #

你在cars.ejs里写的const cars = cars ?? [];是问题根源：const声明的变量存在变量提升，但会进入“暂时性死区”——在声明语句完成前，无法访问该变量。这里你试图用还未完成初始化的同名cars变量赋值给新声明的cars，直接触发了"Cannot access 'cars' before initialization"错误。这个问题和cars.ejs是否被index.ejs包含无关，哪怕直接渲染cars.ejs，只要走这个逻辑就会报错。

修复cars.ejs的核心逻辑 #

把变量声明的冲突去掉，改成以下两种写法之一：

写法1：用新变量名存处理后的数据 #

<% if (typeof cars !== 'undefined') { %>
  <% const safeCars = cars ?? []; %>
  <!-- 后续渲染表格时用safeCars代替cars -->
<% } %>

写法2：提前处理默认值，简化判断 #

<% const safeCars = cars ?? []; %>
<% if (safeCars.length > 0) { %>
  <!-- 渲染车辆表格 -->
<% } else { %>
  <p>暂无车辆数据</p>
<% } %>

这种写法更简洁，不管后端有没有传cars，safeCars都会是一个数组，避免了undefined引发的各种问题。

场景优化方案 #

针对你两种访问场景（首页显示部分内容、/cars/:key单独显示车辆表格），可以这样优化：

1. 保持组件复用性：
   首页index.ejs继续通过<%- include('cars', { cars: cars }) %>引入cars.ejs，如果首页没有车辆数据，就传cars: undefined或者不传，让cars.ejs自己处理默认值。

2. 让cars.ejs同时支持单独渲染：
   修改cars.ejs，增加一个控制变量判断是否作为独立页面渲染，同时保留组件复用能力：

   <!-- cars.ejs -->
   <% if (typeof isStandalone !== 'undefined' && isStandalone) { %>
     <!DOCTYPE html>
     <html>
     <head>
       <title>车辆列表</title>
     </head>
     <body>
   <% } %>
   
   <% const safeCars = cars ?? []; %>
   <% if (safeCars.length > 0) { %>
     <table>
       <!-- 表格内容 -->
     </table>
   <% } else { %>
     <p>暂无车辆数据</p>
   <% } %>
   
   <% if (typeof isStandalone !== 'undefined' && isStandalone) { %>
     </body>
     </html>
   <% } %>
   

   然后修改路由，传递isStandalone变量：

   router.get('/cars/:key', async function (req, res) {
     const ci = new CarsManager();
     const cars = await ci.getcars(req);
     res.render('cars', { cars: cars, isStandalone: true });
   });
   

EJS实现部分内容条件渲染的常用方法 #

当然可以，常用方式有三种：

• 变量控制显示：传递如showCars: true这类开关变量，在模板中判断后渲染对应内容。
• 数据默认值处理：用??或||给动态数据设置默认值，避免undefined导致的渲染错误。
• 拆分为独立组件：把需要条件渲染的部分拆成单独的ejs文件，根据业务逻辑决定是否通过include引入。

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