Next.js客户端组件动态路由遇阻：异步组件不支持问题求解

为什么params是Promise？ #

在App Router中，params被设计为Promise是为了适配Server Component的异步渲染模型。Next.js希望把路由参数的获取和组件内的异步数据请求（比如获取文章内容）统一流程，让你可以并行处理await params和其他异步操作（比如fetch），同时支持流式渲染等特性，确保服务器端渲染的效率和灵活性。

客户端组件处理动态路由的两种方法 #

方法一：Server Component传参给客户端组件

保持页面为Server Component，拿到解析后的params后，传递给子客户端组件。这样既利用了Server Component获取路由参数的能力，又能在客户端组件里使用状态等客户端特性：

页面组件（Server Component，无需加'use client'）

export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  // 这里还可以并行做其他异步数据请求，比如fetch文章详情
  // const post = await fetch(`/api/posts/${slug}`).then(res => res.json());
  return <ClientPostPage slug={slug} />;
}

客户端组件（ClientPostPage.tsx，需加'use client'）

'use client';

import { useState } from 'react';

export default function ClientPostPage({ slug }: { slug: string }) {
  const [likeCount, setLikeCount] = useState(0);
  
  return (
    <div>
      <h1>文章：{slug}</h1>
      <button onClick={() => setLikeCount(prev => prev + 1)}>
        点赞：{likeCount}
      </button>
    </div>
  );
}

方法二：使用useParams钩子（Next.js 13.4+）

如果想直接在客户端组件页面中获取路由参数，可以用Next.js提供的useParams钩子，它能同步获取动态路由参数，无需依赖Server Component：

客户端组件页面（需加'use client'）

'use client';

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

export default function PostPage() {
  const params = useParams<{ slug: string }>();
  const [commentText, setCommentText] = useState('');
  
  return (
    <div>
      <h1>文章：{params.slug}</h1>
      <textarea 
        value={commentText}
        onChange={(e) => setCommentText(e.target.value)}
        placeholder="写下你的评论..."
      />
      <button onClick={() => console.log('提交评论:', commentText)}>
        提交评论
      </button>
    </div>
  );
}

注意：useParams需要Next.js 13.4或更高版本，且只能在客户端组件中使用。

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