Next.js fetch with Suspense

rhfm7lfc  于 2023-05-22  发布在  其他
关注(0)|答案(1)|浏览(160)

根据文档,这是一个典型的fetchSuspense模式(有点简化)。

import { getArtist, getArtistAlbums, type Album } from './api';
 
export default async function Page({
  params: { username },
}: {
  params: { username: string };
}) {
  const albumData = getArtistAlbums(username);
 
 
  return (
    <>
      <Suspense fallback={<div>Loading...</div>}>
        <Albums promise={albumData} />
      </Suspense>
    </>
  );
}
 
// Albums Component
async function Albums({ promise }: { promise: Promise<Album[]> }) {
  // Wait for the albums promise to resolve
  const albums = await promise;
 
  return (
    <ul>
      {albums.map((album) => (
        <li key={album.id}>{album.name}</li>
      ))}
    </ul>
  );
}

它实际上工作正常,但Visual Studio Code一直在抱怨
<Albums promise={albumData} />
由于
Its return type 'Promise<Element>' is not a valid JSX element.
”””我错过了一些明显的吗?这是一个Lint错误,我可以以某种方式沉默?或者是版本问题?**任何正确的方向是非常赞赏。

mctunoxg

mctunoxg1#

NextJS文档指出,这是一个正在处理的已知TypeScript错误。从这里的docs:
异步服务器组件TypeScript错误
异步服务器组件将在使用“Promise”时导致“Promise”不是有效的JSX元素类型错误。这是TypeScript的一个已知问题,目前正在上游解决。作为临时解决方法,您可以在组件上方添加{/* @ts-expect-error Async Server Component */},以禁用对该组件的类型检查。

相关问题