在11ty中用EJS调用collections遇‘Cannot read properties of undefined’错误如何解决？

你出错的核心原因是误用了for...in循环：

• JavaScript的for...in遍历的是对象的可枚举属性名，对于collections.post这个数组来说，a_post拿到的是数组的索引（比如0、1这种字符串），而不是数组里的post对象本身。所以访问a_post.data.title自然会报错——索引字符串没有data属性。
• 而Nunjucks的for post in collections.post语法是专门针对数组/对象的遍历，数组场景下直接返回元素，所以能正常运行。

正确的EJS写法 #

方法1：使用for...of循环（推荐，和Nunjucks逻辑最接近） #

---
layout: layouts/base.ejs
title: a list of post
---
<ul>
  <% const posts = collections.post;
     for (let a_post of posts) { %>
    <li><%- a_post.data.title %></li>
  <% } %>
</ul>

方法2：使用数组forEach方法 #

---
layout: layouts/base.ejs
title: a list of post
---
<ul>
  <% collections.post.forEach(a_post => { %>
    <li><%- a_post.data.title %></li>
  <% }) %>
</ul>

方法3：传统索引式for循环 #

---
layout: layouts/base.ejs
title: a list of post
---
<ul>
  <% const posts = collections.post;
     for (let i = 0; i < posts.length; i++) { 
       const a_post = posts[i]; %>
    <li><%- a_post.data.title %></li>
  <% } %>
</ul>

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