使用SWR调用Next.js API返回undefined问题排查求助

1. 修正SWR返回值的解构错误 #

useSWR默认返回data和error字段，你当前的代码错误地解构了自定义名称的变量，导致获取不到数据。修改为：

const { data: nextMatchData, error: nextMatchError } = useSWR('/api/parsenextmatch', fetcher);

2. 检查浏览器Network面板的请求细节 #

打开浏览器开发者工具的Network标签，查看/api/parsenextmatch请求：

• 确认HTTP状态码为200
• 核对响应体是否是预期的数组格式，有没有被额外的对象包裹
• 排查是否存在CORS或其他请求报错信息

3. 完善fetcher函数的错误处理 #

当前fetcher未处理非200状态码的情况，可能导致错误被隐藏。更新fetcher：

const fetcher = (url) => fetch(url)
  .then((res) => {
    if (!res.ok) throw new Error('请求失败');
    return res.json();
  });

同时查看控制台是否有未捕获的异常信息。

4. 排查SWR的缓存或全局配置 #

• 检查是否修改过SWRConfig全局配置，比如设置了revalidateOnMount: false禁用初始请求
• 强制刷新缓存，在useSWR中添加配置：

  const { data: nextMatchData, error: nextMatchError } = useSWR('/api/parsenextmatch', fetcher, { revalidate: true });
  

5. 确认Hook的使用上下文 #

• useSWR必须在React组件或自定义Hook内调用，确保getMatchData是在组件内部执行，或者将其改为自定义Hook（函数名以use开头）：

  function useMatchData() {
    const { data: nextMatchData, error: nextMatchError } = useSWR('/api/parsenextmatch', fetcher);
    // 后续逻辑
  }
  

6. 核查API路由的隐性变更 #

虽然直接访问API正常，但要排查：

• API路由是否新增了请求方法校验（比如只允许POST，而SWR默认用GET）
• CSV文件路径是否因代码变更失效，或读取逻辑存在隐藏错误（如文件权限、路径拼写）

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