Next.js 15动态路由params的Promise处理问题咨询

1. 这是Next.js 15中处理params的正确方式吗？ #

你的写法完全可行，同时还有另一种官方推荐的方案，分场景选择：

• 若Page组件是异步组件（用async声明），直接通过await params解包是合规的，代码如下：

export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params; 
  return <div>Product ID: {id}</div>;
}

• 若Page组件是同步组件，则需要使用React的use()钩子解包Promise：

import { use } from 'react';

export default function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);
  return <div>Product ID: {id}</div>;
}

当前Next.js 15处于过渡兼容阶段，两种写法都能正常运行，但未来版本会强制要求使用上述两种解包方式。

2. 为何params变为Promise，这是未来版本的有意破坏性变更吗？ #

这是Next.js团队有意的架构演进，并非突发破坏性变更，核心目的是对齐React 18+的Suspense异步渲染模型：

• 旧版同步params的设计，限制了动态路由参数与Suspense特性的深度结合；
• 将params改为Promise后，能更好地支持React异步渲染逻辑，比如在获取参数的同时触发数据请求的Suspense fallback，优化页面加载体验；
• 当前版本保留直接访问params.id的兼容逻辑只是临时过渡，未来正式版本会移除该兼容，强制要求通过await或use()解包，属于长期的架构升级方向。

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