getStaticProps请求The Guardian API获取数据时报错如何解决？

• The Guardian API的标准返回结构中，内容列表results并不在响应根层级，而是嵌套在根节点的response字段内。你的代码直接从响应根对象解构results，得到的是undefined，后续对undefined调用map方法就会触发类型错误。
• 代码缺失响应状态校验逻辑：如果出现API key无效、参数错误、触发请求限流的情况，接口会返回非200状态码，此时直接解析响应体也会引发异常。

修正后的代码如下：

export async function getStaticProps() {
  try {
    const res = await fetch(
      "https://content.guardianapis.com/search?api-key=xxxxxxxx&show-fields=thumbnail"
    );
    // 先校验响应状态是否正常
    if (!res.ok) {
      throw new Error(`接口请求失败，状态码：${res.status}`);
    }
    const data = await res.json();
    // 从response字段内取results
    const { results } = data.response;
    const newsList = results.map((news) => {
      return { ...news };
    });
    return {
      props: { newsList },
    };
  } catch (err) {
    console.error("拉取卫报内容出错：", err);
    // 异常场景可以按需返回 fallback 数据或抛出错误
    return {
      props: { newsList: [] }
    }
  }
}

如果修改后仍有报错，可以检查API key是否正确、是否已经在卫报开放平台激活，以及当前请求IP是否触发了接口的调用频率限制。

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