Handlebars模板{{#each}}循环块无法访问遍历数据问题求助

故障定位步骤（按出现概率从高到低排序） #

• 优先检查服务端返回的数据结构合法性
  90%的同类问题都是数据结构不合法导致的，Handlebars遇到遍历目标不是数组/可遍历对象时，会静默不渲染块内内容，不会抛出显性错误。
  先在路由渲染逻辑里加打印，确认数据结构正确：

  app.get('/', function(req, res) {
      const renderData = quizContent();
      // 加下面三行做校验
      console.log('全量页面数据：', renderData);
      console.log('questions是否为数组：', Array.isArray(renderData.questions));
      console.log('题目总数量：', renderData.questions?.length);
      res.render('main', {layout: 'index', content: renderData});
  });
  

  从贴出的代码片段看，quizContent函数存在明显的语法遗漏：questions数组只写了开括号[，在省略的题目内容结束位置，漏写了数组闭合符号]，会导致questions属性结构异常，甚至整个返回对象不符合预期。修正后的合法结构参考：

  quizContent = () => {
      return {
          title: "What Type of Cookie Are You?",
          description: "Take this fun and easy quiz to find out what kind of cookie you are! Just answer each question, then select Get Result at the bottom of the page",
          questions: [
              {
                  q: "Pick a color",
                  a1: "Blue", 
                  a2: "Red",
                  a3: "Green",
                  a4: "Purple"
              },
              // 其余题目对象按相同格式写在这里
          ] // 必须加这个方括号闭合questions数组
      }   
  }
  

• 检查模板上下文路径是否正确
  用{{#with content}}包裹表单区域后，块内的上下文已经切换为content对象，此时{{#each questions}}的基础写法是正确的，要避开两个易踩的语法坑：
  • 不要在with块内重复写content前缀，比如误写为{{#each content.questions}}，这种写法会去找content.content.questions，值为undefined，直接导致块内不渲染
  • 如果用的是express-handlebars 6.0及以上版本，可以显式加this指向当前上下文做兼容，写法调整为：

    {{#each this.questions}}
        <p>{{this.q}}</p><br>
        <!-- 其余选项代码保持原有逻辑即可 -->
    {{/each}}
    

• 检查布局文件配置是否正确
  确认布局文件index.handlebars存放在views/layouts目录下（不是直接放在views根目录），且文件内必须存在{{{body}}}占位符，否则主模板内容会出现渲染异常，参考合法布局结构：

  <!-- views/layouts/index.handlebars -->
  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
      <meta charset="UTF-8">
      <title>{{content.title}}</title>
      <link rel="stylesheet" href="/style.css">
  </head>
  <body>
      {{{body}}} <!-- 这行必须存在，main.handlebars的内容会被插入到这个位置 -->
  </body>
  </html>
  

快速验证技巧 #

如果以上步骤检查完仍未解决，可以临时在模板里加一行输出，快速定位问题边界：

{{#with content}}
<form action='/result' method="get">
    <p>题目总数校验：{{questions.length}}</p>
    <!-- 如果上面这行能正常输出数字，说明数据传递正常，问题出在each语法；如果输出为空，说明服务端传的数据结构有问题 -->
    {{#each questions}}
        <p>{{q}}</p><br>
    {{/each}}
    <input type="submit" value="Get Result">
</form>
{{/with}}

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