React中Fetch JSON读取v2_titulo.value触发TypeError求助

报错原因很明确：500条数据里存在部分条目缺失custom_fields或v2_titulo字段，导致链式读取value时触发Cannot read properties of undefined错误。以下是几种实用的解决办法：

1. 用可选链操作符（推荐） #

ES2020支持的?.可以安全跳过undefined/null的属性访问，直接在读取时添加：

contenidos.map(item => {
  const titulo = item.custom_fields?.v2_titulo?.value;
  // 后续渲染逻辑
})

如果需要给缺失的标题加默认值，搭配空值合并操作符??：

const titulo = item.custom_fields?.v2_titulo?.value ?? '暂无标题';

2. 提前过滤无效数据 #

如果不想渲染缺失标题的条目，可以先过滤掉不符合结构的数据：

// 先过滤出有完整v2_titulo结构的条目
const validItems = contenidos.filter(item => 
  item.custom_fields && 
  item.custom_fields.v2_titulo && 
  'value' in item.custom_fields.v2_titulo
);

// 再遍历过滤后的数组
validItems.map(item => {
  const titulo = item.custom_fields.v2_titulo.value;
  // 渲染逻辑
})

3. 条件判断兜底 #

在读取前手动判断每一层是否存在，适合不支持可选链的旧环境：

contenidos.map(item => {
  let titulo = '暂无标题';
  if (item.custom_fields) {
    if (item.custom_fields.v2_titulo) {
      titulo = item.custom_fields.v2_titulo.value;
    }
  }
  // 后续渲染
})

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