指定fallbackData后useSWR仍返回undefined的问题排查

问题分析 #

1. Fetcher函数未返回数据：你的fetcher函数内部处理了API响应并赋值给result，但最后没有return result，导致useSWR无法获取到fetcher返回的结果。即便API请求成功，fetcher也不会把数据传递给useSWR，进而导致data出现undefined。
2. getStaticProps位置错误：getStaticProps是Next.js的特殊预渲染函数，必须与组件函数同级导出，不能放在组件内部。虽然你当前的console显示myFallbackData已定义，但这属于语法错误，后续可能引发预渲染失效等问题。
3. SWR Key匹配问题（额外注意）：如果当前i18n.language不是默认的en，SWR会认为这是一个全新的请求Key，此时fallbackData不会生效，会直接触发fetcher请求新语言的数据。不过这不是你当前data为undefined的核心原因。

修正后的代码 #

import useSWR from 'swr';

// getStaticProps必须与组件同级导出
export async function getStaticProps () {
  const res = await fetch('https://myapi.com?language=en');
  const myFallbackData = await res.json();

  return {
    props: {
      myFallbackData
    }
  }
}

function MyPage({ myFallbackData }) {
  console.log(myFallbackData) // 此处数据正常定义
 
  // 修正fetcher：确保返回处理后的数据
  const fetcher = async (url) => {
    const response = await fetch(url);
    const fetchedData = await response.json();
    console.log(fetchedData);
    return fetchedData; // 必须返回数据给useSWR
  }

  const swrKey = `https://myapi.com?language=${i18n.language}`;

  const { data } = useSWR(
    swrKey, 
    fetcher, 
    { fallbackData: myFallbackData }
  );

  console.log(data); // 现在会正常取值：初始为fallbackData，语言切换后会更新为对应语言的API数据

  return <></>;
}

export default MyPage;

补充说明 #

• 当i18n.language等于默认语言en时，SWR会直接使用fallbackData，不会触发额外的API请求（除非配置了强制重新验证）。
• 当切换到其他语言时，SWR会识别为新请求Key，此时会调用fetcher获取对应语言的数据，请求完成前data会保持undefined？不——如果需要切换语言时也有初始兜底数据，你可以在语言切换时提前缓存对应语言的数据，或者结合getStaticPaths预生成多语言页面的静态数据。

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