Next.js：AppRouterInstance无法赋值给NextRouter的TypeScript错误解决

Next.js的App Router和Pages Router采用两套完全独立的路由API类型：

• 从next/navigation导入的useRouter()返回AppRouterInstance类型，这是App Router专属的路由实例，仅包含push、replace等导航方法，没有Pages Router里的route、pathname等属性。
• 你在registerUser中标注的NextRouter是Pages Router（从next/router导入）的类型，两者类型定义完全不兼容，因此TypeScript会抛出类型不匹配的错误。

根据你的项目路由架构，选择对应修复方式：

方式1：统一使用App Router的类型定义 #

如果项目基于App Router开发，直接替换registerUser的router参数类型：

// 从next/navigation导入正确类型
import { AppRouterInstance } from 'next/navigation';

async function registerUser(router: AppRouterInstance, userData: UserData) {
  // 注册逻辑...
  router.push('/dashboard'); // 正常使用App Router导航方法
}

方式2：调整逻辑适配App Router API #

如果registerUser依赖NextRouter的pathname、route等属性，App Router需通过单独hooks获取这些值，而非从router实例上读取：

// 在组件中单独获取路径信息
import { useRouter, usePathname } from 'next/navigation';

export default function RegisterForm() {
  const router = useRouter();
  const pathname = usePathname(); // 用usePathname获取当前路径

  const handleSubmit = async () => {
    await registerUser(router, pathname, userData); // 将需要的参数单独传入
  };
}

// 修改registerUser参数定义
async function registerUser(router: AppRouterInstance, currentPath: string, userData: UserData) {
  // 使用currentPath替代router.pathname
}

方式3：切换为Pages Router API（仅适用于Pages Router项目） #

如果项目实际基于Pages Router开发，统一导入Pages Router的路由API：

// 从next/router导入正确API
import { useRouter, NextRouter } from 'next/router';

async function registerUser(router: NextRouter, userData: UserData) {
  // 注册逻辑...
}

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