Next.js中getServerSideProps无法获取路由参数的问题

1. 修正Link组件的跳转路径 #

你当前的Link路径错误地加上了.tsx后缀，Next.js动态路由跳转不需要包含文件名后缀，正确写法应该是：

<Link href={`/blog-details/${item._id}`}>
  {/* 跳转内容，比如博客标题 */}
</Link>

动态路由文件[id].tsx对应的路由路径是/blog-details/[id]，跳转时只需传入实际的_id值即可，无需附加文件扩展名。

2. 确保getServerSideProps的正确配置 #

• 必须将getServerSideProps作为顶级导出放在页面文件中，不能嵌套在组件内部。
• 确认你的文件是在pages/目录下（Pages Router模式），App Router模式不支持getServerSideProps，需改用Server Components或其他数据获取方式。

修正后的完整示例：

import Link from 'next/link';

// 页面组件
export default function BlogDetails({ blog }) {
  return (
    <div>
      <h1>{blog.title}</h1>
      <p>{blog.content}</p>
    </div>
  );
}

// 顶级导出的getServerSideProps
export const getServerSideProps = async (context) => {
  const { id } = context.params;
  console.log('route params ', id); // 现在应该能打印出正确的id

  // 从数据库获取数据的逻辑
  const response = await fetch(`https://your-api-url/blogs/${id}`);
  const blog = await response.json();

  return {
    props: { blog }, // 将数据传递给页面组件
  };
};

3. 排查其他可能问题 #

• 检查item._id是否有有效值，确保传递的不是空值或undefined。
• 如果使用Next.js 13+的App Router，需将文件移至app/目录，并改用Server Components获取数据（直接在组件内写异步逻辑），或使用generateServerSideProps（仅适用于静态导出场景）。

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