Next.js项目inventory目录下[...slug].tsx的fetch请求返回undefined问题

针对你遇到的warehouse/inventory/[...slug].tsx中fetch请求返回undefined，但同逻辑在warehouse/[...slug].tsx正常的问题，结合路由位置差异，整理几个高频排查点：

1. 路由参数解析差异 #

虽然你确认路由配置正确，但嵌套路由的[...slug]捕获的参数结构可能和顶层路由不一致。比如：

• 顶层warehouse/[...slug]的params.slug可能是['a', 'b']（对应warehouse/a/b）
• 嵌套warehouse/inventory/[...slug]的params.slug可能是['c', 'd']（对应warehouse/inventory/c/d）

如果你的fetch请求依赖slug参数拼接URL，参数结构不匹配会导致请求到错误的API端点，返回空或无效响应，最终处理为undefined。

• 解决：在两个页面中分别console.log(params.slug)，对比参数数组的内容和长度，调整fetch的URL拼接逻辑，确保参数符合API要求。

2. Fetch 缓存策略不一致 #

Next.js中不同路由页面的fetch默认缓存行为可能存在差异：比如顶层页面可能因为动态渲染（SSR）跳过缓存，而嵌套页面被静态生成（SSG）时，fetch默认缓存了初始的空响应；或者两个页面的revalidate配置不同。

• 解决：强制fetch不使用缓存，添加配置：

const res = await fetch(apiUrl, { cache: 'no-store' });

或者根据需求设置重新验证时间：

const res = await fetch(apiUrl, { next: { revalidate: 30 } });

同时检查两个页面的渲染方式（比如是否使用generateStaticParams、getServerSideProps等），确保数据获取的渲染策略一致。

3. 相对路径解析错误 #

如果fetch使用相对路径（比如../api/xxx），嵌套路由页面的相对路径解析会和顶层页面不同：

• 顶层warehouse/[...slug]中../api会解析为根目录下的/api
• 嵌套warehouse/inventory/[...slug]中../api会解析为/warehouse/api，若该端点不存在，请求返回404，处理后得到undefined。
• 解决：改用根绝对路径（比如/api/xxx），或通过环境变量配置完整API地址：

const apiUrl = `${process.env.NEXT_PUBLIC_API_BASE_URL}/your-endpoint`;

4. 缺失错误处理逻辑 #

嵌套页面可能未处理fetch的错误场景：当请求返回4xx/5xx状态码时，直接调用res.json()会抛出错误，若未捕获，后续代码可能返回undefined；而顶层页面可能有完整的错误捕获逻辑，所以能正常处理。

• 解决：添加完整的错误处理：

const fetchData = async () => {
  try {
    const res = await fetch('/api/your-endpoint');
    if (!res.ok) {
      throw new Error(`请求失败: ${res.status} ${res.statusText}`);
    }
    return await res.json();
  } catch (error) {
    console.error('Fetch 错误:', error);
    // 这里可以返回默认值或错误状态
    return null;
  }
};

添加后可以在控制台看到具体错误，快速定位问题。

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