如何从Gatsby+GraphQL返回的JS对象中正确提取fluid.src属性？

DevOps 小满

2026-10-6

问题原因

报错本质是尝试访问null类型值的子属性：你返回的数组中大部分节点的image字段为null，直接执行e.node.image.fluid相当于访问null.fluid，自然会抛出属性未定义的错误。

解决方案

以下是适配不同场景的实现方式：

方案1：使用可选链操作符（推荐，Gatsby默认兼容ES2020语法）
可选链?.会在访问的属性不存在时直接返回undefined，不会中断代码执行：
```
console.log(data.allContentfulLongPost.edges.map((e) => e.node.image?.fluid?.src))
```
执行后返回的数组中，有有效图片的项对应图片路径，无图片的项为undefined。
方案2：使用短路判断兼容低版本运行环境
如果你的运行环境不支持可选链语法，可以用逻辑与运算符做层层判空：
```
console.log(data.allContentfulLongPost.edges.map((e) => e.node.image && e.node.image.fluid && e.node.image.fluid.src))
```

方案3：先过滤无图片的节点再提取属性
如果你只需要保留有有效图片的结果，可以先做过滤再提取属性：

const validImgSrcList = data.allContentfulLongPost.edges
  .filter(e => e.node.image?.fluid?.src)
  .map(e => e.node.image.fluid.src)
console.log(validImgSrcList)

额外优化建议

渲染Gatsby图片组件时，可以添加判空逻辑避免渲染无效节点：

{data.allContentfulLongPost.edges.map((edge) => (
  <article key={edge.node.id}>
    {edge.node.image?.fluid && (
      <GatsbyImage 
        fluid={edge.node.image.fluid} 
        alt={edge.node.image.title || '文章封面'} 
      />
    )}
    {/* 其余文章内容渲染逻辑 */}
  </article>
))}