如何在 EJS 模板中安全处理未定义变量以避免渲染错误-js教程-PHP中文网

如何在 ejs 模板中安全处理未定义变量以避免渲染错误

EJS 模板中直接访问未定义变量（如 donors）会导致 ReferenceError，使页面无法渲染。本文详解如何通过统一数据结构、条件防护和路由逻辑优化，确保模板健壮运行。

如何在 ejs 模板中安全处理未定义变量以避免渲染错误

在使用 Express + EJS 构建动态网页时，一个常见却容易被忽视的问题是：模板中引用了后端未传递的变量，导致整个页面崩溃并抛出 ReferenceError: xxx is not defined。正如您遇到的情况—— 0) { %> 这一行看似做了空值检查，但若 donors 根本未在 res.render() 中传入，JavaScript 引擎会在解析阶段直接报错，根本不会执行到 && 后面的判断。

? 根本原因分析

观察您的三处 GET 路由：

// ❌ 问题路由1：未传任何数据
app.get('/donors', (req, res) => {
  res.render('donors.ejs', {}); // ← donors 未定义！
});

// ❌ 问题路由2：同样未传 donors
app.get('/views/donors.ejs', (req, res) => {
  res.render('donors.ejs', {}); // ← donors 未定义！
});

而您的 POST 路由和第一个 GET 路由均显式传入了 donors: ...，因此能正常渲染。EJS 不会为缺失变量赋予 undefined 并静默继续——它会立即中断渲染并抛出 ReferenceError。

✅ 正确解决方案

1. 统一数据结构：所有路由必须提供 `donors`

即使无数据，也应传递一个默认值（如空数组），而非省略字段：

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

// ✅ 修复后的 GET 路由（推荐）
app.get('/donors', (req, res) => {
  res.render('donors.ejs', { 
    donors: [], 
    blood_type: [], 
    city: [], 
    getBloodTypeText: getBloodTypeText,
    getCompatibleBloodTypes: getCompatibleBloodTypes
  });
});

// ✅ 避免直接访问 .ejs 路径（开发调试除外），若必须保留则同样初始化
app.get('/views/donors.ejs', (req, res) => {
  res.render('donors.ejs', { donors: [] });
});

? 提示：donors: [] 是最佳实践——既满足 donors.length 安全访问，又与实际查询返回的数组类型一致，避免后续 .forEach() 报错。

2. 模板层双重防护（增强鲁棒性）

即便后端已保障，EJS 中仍建议用 typeof 或 in 操作符做兜底（尤其在多人协作或动态传参场景）：

<div class="container mt-5">
  <div class="row justify-content-center">
    <!-- 安全检查：变量存在且为数组 -->
     0) { %>
       { %>
        <div class="col-12 col-sm-6 col-lg-4 mb-4">
          <div class="card" style="background-color: #D27878;">
            <div class="card-body">
              <h5 class="card-title"></h5>
              <p class="card-text">Blood Type: </p>
              <p class="card-text">City: </p>
              <p class="card-text">Phone: </p>
            </div>
          </div>
        </div>
      
    
      <div class="alert alert-info text-center w-100">
        <p class="mb-0">No donors available at the moment.</p>
      </div>
    
  </div>
</div>