Next.js中为何无法在getServerSideProps内调用useRouter钩子

你触发的报错信息如下：

Invalid hook call. Hooks can only be called inside of the body of a function component.（无效钩子调用：钩子仅可在函数组件的函数体内部调用）

报错的核心原因有两点：

• useRouter 是Next.js封装的React Hook，必须严格遵守React Hook调用规则：只能在React函数组件、自定义Hook的顶层作用域内调用，不能在普通异步函数、类组件等非React组件上下文里使用。
• getServerSideProps 是Next.js在服务端独立执行的数据预取函数，运行时机早于页面组件渲染，本身不属于React函数组件的内部执行上下文，在这里调用useRouter完全违反Hook调用规则，自然会抛出错误。

另外你原本的代码还有一个逻辑问题：就算是在组件里用useRouter，要取路径里的id也不能直接拿整个router.params，params是存储所有路径参数的对象，需要通过router.params.id才能拿到具体的id值，而且在getServerSideProps里根本不需要借助Hook取参数，函数本身自带的入参就包含所有路由信息。

getServerSideProps执行时会默认接收一个服务端上下文对象context，动态路由的路径参数直接存在context.params里，URL查询参数（?拼接的参数）存在context.query里，直接从入参解构取值即可，无需调用任何Hook。
修正后的完整代码如下：

import React from 'react';
import axios from 'axios';

const SingleProject = (props) => {
  // 直接使用服务端注入的项目数据渲染页面
  return (
    <div>
      <h1>项目详情页</h1>
      {/* 基于props.projectData渲染具体项目内容 */}
    </div>
  );
};

export const getServerSideProps = async (context) => {
  // 从上下文的params中解构出动态路由的id参数
  const { id } = context.params;
  // 服务端拉取对应id的项目数据
  const res = await axios.get(`http://localhost:5000/project/${id}`);
  const projectData = res.data;

  return {
    props: {
      projectData
    }
  }
}

export default SingleProject;

实现注意事项：

• 必须保证动态路由文件的命名符合Next.js规范，比如对应路径为pages/project/[id].jsx，context.params才能正确解析到id字段
• useRouter仅适合在客户端侧的组件逻辑中使用，比如处理客户端跳转、读取客户端路由状态，不要在服务端执行的函数（getServerSideProps/getStaticProps等）里调用
• 如果页面需要做静态生成（getStaticProps），路径参数同样是从函数入参context.params里获取，逻辑一致

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