React新闻应用：使用JS可选链条件渲染API图片遇类型错误

问题分析 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'media-metadata')错误，核心原因是可选链的使用位置不对：你只在url前加了可选链，但前面的media[0]甚至media本身可能就是undefined——当API返回的新闻对象没有图片时，media字段可能不存在，或者media数组为空，直接访问media[0]['media-metadata']必然触发错误。

修复方案 #

需要在每一层可能为undefined的节点都添加可选链操作符?.，同时用空合并运算符??来指定默认图片（比三元运算符更适合处理null/undefined的场景）。修改后的代码如下：

<div className="card">
  {title}
  <ImageFormat 
    className={media} 
    component="img" 
    src={media?.[0]?.['media-metadata']?.[2]?.url ?? 'https://upload.wikimedia.org/wikipedia/commons/e/e0/Red_Exclamation_Dot.png'}
  />
  <div className="facet">
    {des_facet}
  </div>
</div>

代码说明 #

• media?.[0]：先检查media是否存在，存在再取数组第一个元素；如果media是undefined，直接返回undefined
• ?.['media-metadata']：检查第一个media对象是否包含media-metadata字段
• ?.[2]：检查media-metadata数组是否有索引为2的元素
• ?.url：检查该元素是否包含url属性
• ??：如果前面的表达式结果为null或undefined，就使用后面的默认图片URL

优化建议（可选） #

为了提升代码可读性，你可以提前在组件中计算好图片URL：

const imageUrl = media?.[0]?.['media-metadata']?.[2]?.url ?? 'https://upload.wikimedia.org/wikipedia/commons/e/e0/Red_Exclamation_Dot.png';

// 后续JSX中直接使用
<ImageFormat className={media} component="img" src={imageUrl} />

这样不仅逻辑更清晰，也方便后续统一修改默认图片地址。

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