Next.js调用Shazam API获取数据返回undefined问题求助

问题排查方向 #

• 先校验HTTP响应状态：你的现有代码没有判断fetch请求返回的状态码，若接口返回4xx/5xx错误（比如鉴权失败、配额耗尽、路径错误），直接调用res.json()可能得到不符合预期的结构甚至报错，最终导致data为undefined。
• 确认API密钥有效性：你代码中填写的x-rapidapi-key占位符my_key需要替换为你在RapidAPI平台申请的真实密钥，同时要确认你已经在RapidAPI后台订阅了Shazam API的对应使用套餐（免费套餐也需要手动订阅激活才能调用）。
• 检查请求参数与端点合法性：可以先在RapidAPI的接口调试页面试跑你当前用的charts/track端点和参数，确认能正常返回数据后再对齐到代码中，避免参数拼写、端点路径错误。

修复后参考代码 #

新增了状态校验和异常捕获逻辑，方便你定位具体问题：

export async function getServerSideProps(context) {
  try {
    const res = await fetch(
      'https://shazam.p.rapidapi.com/charts/track?locale=en-US&pageSize=20&startFrom=0',
      {
        method: 'GET',
        headers: {
          'x-rapidapi-host': 'shazam.p.rapidapi.com',
          'x-rapidapi-key': '替换为你的真实RapidAPI密钥',
        },
      },
    );

    // 新增响应状态校验
    if (!res.ok) {
      // 开发环境可以查看控制台打印的状态码定位错误类型
      console.log('接口请求失败，状态码：', res.status)
      return {
        notFound: true,
      }
    }

    const data = await res.json();
    // 开发环境可以打印完整返回结构，确认数据层级是否符合预期
    console.log('接口返回原始数据：', data)

    if (!data) {
      return {
        notFound: true,
      };
    }

    return {
      props: {
        data: data,
      },
    };
  } catch (err) {
    // 捕获网络异常、json解析异常等问题
    console.error('请求处理出错：', err)
    return {
      notFound: true,
    }
  }
}

如果是页面组件侧拿到的data为undefined，确认组件接收props的属性名和getServerSideProps返回的props字段名一致即可。

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