无法访问node-fetch获取的JSON数据元素，调用forEach报错

问题根源 #

你调用的API返回的JSON结构并非直接是RidesData数组，而是一个包含rides属性的对象，核心结构如下：

{
  "rides": [
    // 过山车数据数组
  ]
}

但你的代码直接将返回的JSON断言为RidesData[]类型，导致实际拿到的是一个对象而非数组，因此出现：

• data[0]返回undefined
• 调用data.forEach时报错TypeError: data.forEach is not a function

解决方案 #

1. 新增响应类型定义 #

在RidesData接口上方补充外层响应的类型：

export interface RidesResponse {
  rides: RidesData[];
}

2. 修正fetchData函数 #

修改JSON解析逻辑，提取rides数组作为返回值：

export function fetchData(url: string): Promise<RidesData[]> {
  return new Promise((resolve, reject) => {
    import('node-fetch')
      .then(({ default: fetch }) => {
        const settings = { method: "GET" };
        fetch(url, settings)
          .then((res) => res.json())
          .then((json: RidesResponse) => {
            resolve(json.rides); // 提取数组返回
          })
          .catch((error: Error) => { 
            reject(error);
          });
      })
      .catch((error: Error) => {
        reject(error);
      });
  });
}

3. 修正数据访问代码的类型笔误 #

将代码中的RidesDataType替换为正确的RidesData：

data.forEach((ride: RidesData) => {
  // 原有逻辑保持不变
});

验证效果 #

修改完成后，fetchData会返回真正的RidesData数组，此时：

• data[0]能正确输出第一个过山车的数据
• data.forEach可以正常遍历数组执行判断逻辑

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