Gatsby结合GraphCMS项目build时报Cannot read property 'map' of undefined错误

错误原因 #

• 传值类型不匹配：GraphQL查询返回的Project.images是数组结构，每个数组元素才包含url字段，你父组件直接传递home.images.url，拿到的是undefined，子组件对undefined执行map方法，编译阶段直接抛出类型错误。
• 本地开发未报错的原因：gatsby develop是客户端实时渲染模式，内置了部分运行时容错逻辑，未捕获到异步数据加载阶段的空值问题；gatsby build是静态预编译模式，会严格执行全链路的类型校验，空值调用方法直接中断编译。
• 语法不规范问题：你贴出的StaticQuery代码缺少渲染回调函数，没有正确将查询到的数据赋值给变量使用，同时你调用时用的home变量在现有查询逻辑中没有定义，查询返回的根节点是Project而非home；另外子组件遍历的DOM节点缺少key属性，也是build阶段报错的常见触发原因。

解决方法 #

1. 修正父组件StaticQuery语法，正确传递数组类型的图片数据

// 修正后的父组件查询&调用代码
<StaticQuery
  query={graphql`
    {
      Project {
        images {
          url(transformation: {document: {output: {format: webp}}})
        }
      }
    }
  `}
  render={data => {
    // 直接传递查询到的images数组给子组件
    return <Child images={data.Project.images} />
  }}
/>

2. 给子组件的遍历逻辑加空值保护，补充必填的key属性

// 修正后的子组件遍历代码
{
  // 先判断是否为数组再执行遍历，避免空值报错
  Array.isArray(props.images) ? props.images.map((el, idx) => {
    return (
      <div key={idx}>
        <img src={el.url} alt="img" />
      </div>
    );
  }) : null
}

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