Next.js中如何await自定义类型？params需await警告求解

你的问题出在Next.js 13.2.x版本的App Router机制里：params本身是一个Promise对象，不能直接解构它的属性，必须先完整await整个params对象，再提取userId。之前你尝试的操作没做对顺序，才会一直收到警告。

下面是修正后的完整代码：

import getUser from "@/lib/getUser";
import getUserPosts from "@/lib/getUserPosts";
import { Suspense } from "react";
import UserPosts from "./components/UserPosts";
import type { Metadata } from "next";

// 调整类型定义：params是Promise类型
type Params = {
  params: Promise<{
    userId: string;
  }>;
};

export async function generateMetadata({ params }: Params): Promise<Metadata> {
  // 先await params拿到实际参数对象，再解构userId
  const { userId } = await params;
  const user = await getUser(userId);

  return {
    title: user.name,
    description: `This is the page of ${user.name}`,
  };
}

export default async function UserPage({ params }: Params) {
  // 同样先await params
  const { userId } = await params;
  const userData = getUser(userId);
  const userPostsData = getUserPosts(userId);

  const user = await userData;

  return (
    <>
      <h2>{user.name}</h2>
      <br />
      <Suspense fallback={<h2>Loading...</h2>}>
        <UserPosts promise={userPostsData} />
      </Suspense>
    </>
  );
}

关键修改点：

• 更新Params类型，把params定义为Promise<{userId: string}>
• 在generateMetadata和页面组件中，先执行const { userId } = await params，拿到实际的userId后再调用数据接口

额外说明：这个问题在Next.js 13.3及以上版本已经被修复，后续升级版本后，就不用再写await params，直接解构即可。

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