NextJS中useSWR的fetcher返回正常但主函数数据为undefined问题排查

我一眼就发现问题所在啦——你的**fetcher函数没有返回异步操作的结果**！

先看你当前的fetcher代码：

const fetcher = (url) => {
 fetch(url)
 .then((r) => r.json())
 .then((data) => {
 return { user: data?.user || null };
 });
};

这里你调用了fetch()发起请求，但没有把整个Promise链返回出去。fetcher函数实际上默认返回了undefined，而不是包含请求数据的Promise——这就导致useSWR无法获取到异步请求的结果，自然data一直是undefined。

修正方案 #

只需要给fetch()前面加上return，让fetcher返回整个Promise链就行：

const fetcher = (url) => {
 return fetch(url) // 这里补上return！
 .then((r) => r.json())
 .then((data) => {
 return { user: data?.user || null };
 });
};

或者用箭头函数的隐式返回写法，代码更简洁：

const fetcher = (url) => 
 fetch(url)
 .then((r) => r.json())
 .then((data) => ({ user: data?.user || null }));

补充建议：给fetcher加上错误处理 #

为了让useSWR能正确捕获请求失败的状态，你可以给fetcher加上HTTP错误和异常处理：

const fetcher = (url) => {
 return fetch(url)
 .then((r) => {
 if (!r.ok) throw new Error('请求失败'); // 处理4xx/5xx这类HTTP错误
 return r.json();
 })
 .then((data) => ({ user: data?.user || null }))
 .catch((err) => {
 console.error('获取用户数据失败:', err);
 throw err; // 把错误抛出去，让useSWR捕获到error状态
 });
};

这样修改后，useSWR就能正确拿到请求返回的data，user也不会再是undefined啦。

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