NextJS TypeScript中getInitialProps返回undefined问题求助

你的问题核心在于最新版Next.js（13+）默认使用App Router，而getInitialProps是Pages Router专属的API，在App Router环境下无法生效，所以才会获取不到token。下面分两种场景给出解决方案：

场景1：使用App Router（Next.js 13+默认） #

App Router的路由结构和参数获取方式完全不同，你需要调整文件结构和代码：

1. 确保文件路径为 app/change-password/[token]/page.tsx（动态路由通过[token]文件夹实现）
2. 根据组件类型选择获取参数的方式：

Server Component（默认，无需客户端交互） #

直接通过组件props接收params：

import React from "react";

interface PageProps {
  params: {
    token: string;
  };
}

export default function ChangePassword({ params }: PageProps) {
  return <div>token is {params.token}</div>;
}

Client Component（需要客户端交互时添加'use client'） #

使用useParams钩子获取参数：

'use client';
import React from "react";
import { useParams } from "next/navigation";

export default function ChangePassword() {
  const params = useParams();
  return <div>token is {params.token}</div>;
}

场景2：坚持使用Pages Router #

如果你仍在使用Pages Router（文件放在pages目录下），可以改用更推荐的getServerSideProps替代getInitialProps（最新版Next.js对getInitialProps的支持有限）：

import { NextPage } from "next";
import React from "react";

interface ChangePasswordProps {
  token: string;
}

const ChangePassword: NextPage<ChangePasswordProps> = ({ token }) => {
  return <div>token is {token}</div>;
};

export async function getServerSideProps(context) {
  // 适配Next.js不同版本的参数位置
  const token = context.params?.token || context.query.token;
  return {
    props: {
      token: token as string,
    },
  };
}

export default ChangePassword;

额外检查点 #

• 确认文件路径严格对应路由：Pages Router下是pages/change-password/[token].tsx，App Router下是app/change-password/[token]/page.tsx
• 若使用Pages Router，确保没有在next.config.js中启用App Router相关配置

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