React Native访问Google Directions嵌套数组内transit_details触发类型错误

这问题我之前也碰到过——大概率是不是所有steps都包含transit_details对象，或者你在层级访问时某个环节的数组/对象是undefined，导致直接访问属性触发了报错。毕竟Google Directions的响应里，只有公交、地铁这类公共交通的step才会带transit_details，步行、驾车的step根本没这个字段。

给你几个实用的解决思路和代码示例：

1. 安全访问嵌套属性，避免踩undefined的坑 #

可以用ES6的可选链操作符（?.）快速做安全访问，或者用传统的条件判断逐层校验：

可选链写法（简洁高效） #

// 假设directionsResponse是你拿到的JSON响应对象
directionsResponse.routes.forEach(route => {
  route.legs?.forEach(leg => {
    leg.steps?.forEach(step => {
      // 先判断transit_details是否存在，再操作
      const transitInfo = step.transit_details;
      if (transitInfo) {
        console.log('线路名称:', transitInfo.line.name);
        console.log('出发站点:', transitInfo.departure_stop.name);
      } else {
        console.log('当前step非公共交通环节，无transit_details');
      }
    });
  });
});

传统条件判断（兼容旧环境） #

directionsResponse.routes.forEach(route => {
  // 先校验legs数组存在且非空
  if (route.legs && route.legs.length > 0) {
    route.legs.forEach(leg => {
      // 校验steps数组存在且非空
      if (leg.steps && leg.steps.length > 0) {
        leg.steps.forEach(step => {
          // 最后校验transit_details是否存在
          if (step.transit_details) {
            console.log('线路名称:', step.transit_details.line.name);
          }
        });
      }
    });
  }
});

2. 处理未捕获的Promise拒绝 #

既然是Promise相关的错误，一定要给你的请求Promise加上.catch()块，把错误接住处理，别让它在控制台飘红：

// 假设你用fetch发起API请求
fetch('你的Google Directions API请求地址')
  .then(res => res.json())
  .then(data => {
    // 这里放上面的遍历处理逻辑
  })
  .catch(err => {
    console.error('请求或数据处理出错:', err);
    // 这里可以加错误提示、重试逻辑之类的
  });

3. 先确认响应结构没问题 #

你可以先把完整的JSON响应打印出来，看看legs和steps数组是不是真的有数据，以及哪些step带transit_details——有时候可能因为路线规划的特殊情况，返回的legs是空数组，这时候直接访问leg.steps也会报错。

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