React渲染Contentful列表中singleMedia类型内容时出现读取错误

我需要从Contentful的项目帖子中拉取数据到另一页面，仅展示singleMedia类型的内容（图片/视频）。原项目由其他开发者搭建，包含singleMedia、bannerMedia、accordionMedia等多种媒体类型，项目页通过switch语句识别数组内容类型来渲染。

目前的状况是：通过console.log能看到所有URL及内容，GraphiQL查询也能获取到所需数据，但应用仍报错：Cannot read properties of undefined (reading 'file')。

当前使用的map渲染代码（已过滤非singleMedia类型） #

{value.mainContent.map((block) => (
         <Reveal
              fraction={ANIMATION.revealFraction}
              keyframes={customReveal}
              triggerOnce
         >
              {block.singleMedia && block.singleMedia.fluid ? (
                     <Img key={block.id} fluid={block.singleMedia.fluid} />
              ) : (
                     <Video
                         key={block.id}
                         autoPlay={true}
                         loop={true}
                         muted={true}
                         playsInline
                         src={block.singleMedia.file.url}
                     />
              )}
         </Reveal>
      )
    )}

GraphQL查询语句 #

mainContent {
      ... on Node {
        ... on ContentfulProjectSingleMedia {
          id
          internal {
            type
          }
          singleMedia: media {
            file {
              url
            }
            fluid(maxWidth: 1440, resizingBehavior: SCALE) {
              ...GatsbyContentfulFluid
            }
          }
        }
      }
    }

问题原因与修复方案 #

报错的核心是：视频类型的media不会返回fluid字段，但你的代码在block.singleMedia.fluid为false时，直接尝试访问block.singleMedia.file.url，如果此时block.singleMedia为空或者file未定义，就会触发报错——哪怕你已经过滤了类型，也可能因为Contentful数据返回的结构差异（比如某些singleMedia的media字段为空）导致问题。

1. 增加空值防护（最直接的修复）

给深层属性访问添加空值判断，或者使用可选链操作符简化逻辑：

{value.mainContent.map((block) => (
  <Reveal
    fraction={ANIMATION.revealFraction}
    keyframes={customReveal}
    triggerOnce
    key={block.id}
  >
    {block.singleMedia?.fluid ? (
      <Img key={block.id} fluid={block.singleMedia.fluid} />
    ) : (
      block.singleMedia?.file?.url && (
        <Video
          key={block.id}
          autoPlay={true}
          loop={true}
          muted={true}
          playsInline
          src={block.singleMedia.file.url}
        />
      )
    )}
  </Reveal>
))}

• 可选链?.会在属性不存在时返回undefined，避免直接抛出错误；
• 额外添加block.singleMedia?.file?.url &&的判断，确保只有当URL存在时才渲染视频组件。

2. 检查Contentful数据源

登录Contentful后台，确认所有ContentfulProjectSingleMedia类型的条目里，media字段是否都已正确填充——如果存在media为空的条目，要么补全数据，要么在代码里直接跳过这类无效条目：

{value.mainContent
  .filter(block => block.singleMedia?.file || block.singleMedia?.fluid)
  .map((block) => (
    // 原渲染代码
  ))
}

3. 优化GraphQL查询

虽然GraphiQL能查到数据，但可以明确指定字段的非空性（如果Contentful支持），或者确保查询返回的结构更稳定：

singleMedia: media {
  file {
    url
  }
  fluid(maxWidth: 1440, resizingBehavior: SCALE) {
    ...GatsbyContentfulFluid
  }
}

注意：视频类型的media本身就没有fluid字段，所以这个字段会返回null，代码里必须处理这种情况。

内容的提问来源于stack exchange，提问作者Sam St Aubyn