Next.js中params被识别为Promise的TypeScript错误解决问询

问题根源 #

你遇到的核心问题是类型定义与实际传入的params类型不匹配——TypeScript被错误引导，认为params应该是Promise类型，但实际Next.js传入的是普通对象{ id: string }，因此报出“缺少then/catch方法”的类型冲突。

常见触发原因：

• 混淆了Next.js Pages Router和App Router的参数处理逻辑
• 手动定义类型时错误地将params标记为Promise类型
• 异步数据获取逻辑中，误将Promise对象赋值给了params变量

分路由体系的正确类型标注方案 #

1. 若使用App Router（app目录下的动态路由，如app/post/[id]/page.tsx） #

App Router中，页面组件的params由Next.js自动传入，是普通对象，无需手动处理Promise。有两种标注方式：

方式1：使用Next.js内置的PageProps

import type { PageProps } from 'next';

export default function PostPage({ params }: PageProps) {
  // params.id 会被自动推断为string类型
  return <div>文章ID：{params.id}</div>;
}

方式2：手动定义精确类型

// 定义页面专属的参数类型
type PostPageProps = {
  params: {
    id: string;
  };
};

export default function PostPage({ params }: PostPageProps) {
  return <div>文章ID：{params.id}</div>;
}

2. 若使用Pages Router（pages目录下的动态路由，如pages/post/[id].tsx） #

Pages Router中，参数需通过getServerSideProps/getStaticProps传递，或客户端用useRouter获取：

服务端渲染场景（getServerSideProps）

import { GetServerSideProps, InferGetServerSidePropsType } from 'next';

// 用InferGetServerSidePropsType自动推导props类型，避免手动定义出错
export default function PostPage({ id }: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return <div>文章ID：{id}</div>;
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  // 从context中取出动态参数，强制类型转换为明确的结构
  const { id } = context.params as { id: string };
  
  // 这里编写获取文章详情的逻辑
  return {
    props: { id },
  };
};

客户端渲染场景（useRouter）

import { useRouter } from 'next/router';

export default function PostPage() {
  const router = useRouter();
  // router.query中的参数可能为string/string[]/undefined，需做类型处理
  const id = router.query.id as string;
  
  return <div>文章ID：{id}</div>;
}

快速排查步骤 #

1. 检查你的类型定义文件，确保没有将params定义为Promise<{ id: string }>，正确类型应为{ id: string }
2. 确认当前使用的路由体系（App/Pages Router），对应调整代码结构
3. 若之前手动封装了PageProps类型，删除错误的Promise标注

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