Next.js中GetServerSideProps首次渲染req与resolvedUrl为undefined问题

问题背景 #

使用next": "^12.1.4"和@types/node": "^14.14.6"，页面首次渲染时getServerSideProps的req和resolvedUrl参数为undefined，刷新后参数恢复正常，但路径会出现/undefined/undefined/，添加的条件判断未生效。

解决方案 #

1. 确认getServerSideProps的导出方式 #

必须保证getServerSideProps是页面组件的同级顶级导出，不能嵌套在组件内部：

// 错误写法
export default function Page() {
  export async function getServerSideProps(context) { /* ... */ }
}

// 正确写法
export default function Page() {
  // 页面组件逻辑
}

export async function getServerSideProps(context) {
  const { req, resolvedUrl } = context;
  // 业务逻辑
  return { props: {} };
}

2. 排查动态路由与参数传递问题 #

如果页面使用动态路由（如[slug].js），检查导航时是否传递了无效参数导致路由解析异常。可以先打印完整context确认参数状态，同时避免undefined拼接进路径：

export async function getServerSideProps(context) {
  console.log('完整上下文对象:', context); // 排查参数是否存在
  const req = context.req || {};
  const resolvedUrl = context.resolvedUrl || '/';
  // 清理路径中的undefined字符串
  const processedPath = resolvedUrl.replace(/undefined/g, '');
  
  return { props: { path: processedPath } };
}

3. 修复类型定义版本兼容问题 #

@types/node@14.14.6与next@12.1.4可能存在类型冲突，建议更新@types/node到适配Next.js 12.x的版本：

# npm
npm install @types/node@^16 --save-dev

# yarn
yarn add @types/node@^16 --dev

4. 修正条件判断逻辑 #

确保条件判断正确覆盖undefined场景，避免直接使用未校验的参数：

export async function getServerSideProps(context) {
  const { req, resolvedUrl } = context;
  
  // 参数不存在时返回默认值
  if (!req || !resolvedUrl) {
    return { props: { path: '/' } };
  }
  
  // 正常业务逻辑
  return { props: { path: resolvedUrl } };
}

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