Next.js 15动态路由构建类型错误问题求助

错误原因 #

你错误地对params使用了await——在Next.js App Router中，Server Component的params是直接可用的普通对象，并非Promise；如果是Client Component，需用useParams钩子获取，同样不需要await。多余的await会导致TypeScript认为params是Promise类型，从而触发“缺少then/catch方法”的类型错误。

正确代码示例 #

1. Server Component（默认无'use client'指令）

// app/[id]/page.tsx
async function Page({ params }: { params: { id: string } }) {
  // 直接使用params.id，无需await
  const res = await fetch(`https://your-api-url/${params.id}`);
  const data = await res.json();

  return (
    <div>
      <h1>Item ID: {params.id}</h1>
      <p>Data: {JSON.stringify(data)}</p>
    </div>
  );
}

export default Page;

2. Client Component（添加'use client'指令）

'use client';

import { useParams } from 'next/navigation';
import { useEffect, useState } from 'react';

function Page() {
  // 用useParams获取路由参数，指定泛型类型
  const params = useParams<{ id: string }>();
  const [data, setData] = useState(null);

  useEffect(() => {
    if (!params.id) return;

    const fetchData = async () => {
      const res = await fetch(`https://your-api-url/${params.id}`);
      const result = await res.json();
      setData(result);
    };

    fetchData();
  }, [params.id]);

  return (
    <div>
      <h1>Item ID: {params.id}</h1>
      {data ? <p>Data: {JSON.stringify(data)}</p> : <p>Loading...</p>}
    </div>
  );
}

export default Page;

后续检查步骤 #

• 移除代码中所有await params的语句
• 根据页面是否需要交互逻辑，选择Server/Client Component模式
• 确保TypeScript类型定义正确：Server Component显式声明params的类型，Client Component给useParams添加泛型约束
• 重新执行npm run build验证修复效果

内容的提问来源于stack exchange，提问作者Heli Bhadeshiya ownAI