Nextjs 收到“客户端组件尚不支持异步/等待，仅服务器组件支持。”在服务器组件上

Question

我正在使用带有应用程序路由器的 Nextjs v 14.1。 在

src/app/page.tsx

内部，我将

PostsFeed

作为

ClientComponent

的子级传递。

export default function Home() {
    return (
        <main className={styles.main}>
              ...
             ....
              ....
            <section>
                <ClientComponent>
                    <PostsFeed />
                </ClientComponent>
            </section>
        </main>
    )
}

我正在遵循此文档中的模式，但我收到此错误。

async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.
    at PostsFeed
    at ClientComponent (webpack-internal:///(app-pages-browser)/./src/app/components/ClientComponent.tsx:8:11)
    at section
    at main
    at Home

我不明白为什么 Nextjs 认为 PostsFeed 是客户端组件。

ClientComponent.tsx

"use client";

export default function ClientComponent({
  children,
}: {
  children: React.ReactNode;
}) {
  return <>{children}</>;
}

PostsFeed.tsx

import { PostCard } from "./PostCard";

export const PostsFeed = async () => {
  const res = await fetch(`/posts`);

  const { data } = await res.json();

  let posts = data as IPost[];

  return (
    <div className="grid grid-cols-3 gap-4">
      {posts.map((post, index) => (
        <PostCard key={index} post={post} />
      ))}
    </div>
  );
};

Answer 1

组件需要以某种方式定义，如下所示：

export const PostsFeed = async () => {

应该是

export default async function PostsFeed() {