Next.js中YouTube播放列表缩略图加载失败问题排查

YouTube Data API 返回的播放列表项中，并非所有视频都包含全尺寸的缩略图：

• maxres（最高清）缩略图仅在视频本身为高清分辨率时才会存在，低分辨率视频可能没有该字段；
• 极少数情况下，甚至default级别的缩略图也可能缺失（概率极低，但需兼容）。

你单独访问result.items[0].snippet.thumbnails.maxres.url正常，是因为第一个视频恰好有高清缩略图，但遍历到其他无该字段的视频时，就会触发Cannot read properties of undefined (reading 'url')错误。

使用可选链操作符（?.）安全访问嵌套属性，同时添加降级逻辑，确保总有可用的缩略图：

修改遍历代码如下：

{result.items.map((res, idx) => {
  // 优先取高清图，依次降级到默认图，最后可设置兜底图
  const thumbnailUrl = res.snippet.thumbnails.maxres?.url 
    ?? res.snippet.thumbnails.high?.url 
    ?? res.snippet.thumbnails.medium?.url 
    ?? res.snippet.thumbnails.default?.url 
    ?? '/path/to/your/default-image.jpg'; // 可选：本地兜底图

  return <ShowCard result={thumbnailUrl} key={idx} />;
})}

关键说明： #

• ?.：当左侧属性为undefined或null时，直接返回undefined，不会继续访问后续属性，避免报错；
• ??：空值合并运算符，仅当左侧为undefined或null时，才会取右侧的值，确保优先使用高分辨率图。

如果仍有报错，建议在getStaticProps中打印完整的result数据，确认是否存在某个播放列表项的snippet.thumbnails本身为undefined，这种极端情况可再加一层可选链：res.snippet?.thumbnails?.default?.url。

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