英文:
Next.js fetch with Suspense
问题
根据文档，这是一个典型的带有Suspense模式的fetch（有点简化）。
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组件
async function Albums({ promise }: { promise: Promise<Album[]> }) {
// 等待相册承诺解析
const albums = await promise;
return (
<ul>
{albums.map((album) => (
<li key={album.id}>{album.name}</li>
))}
</ul>
);
}
实际上它可以正常工作，但Visual Studio Code一直在抱怨
<Albums promise={albumData} />
因为
它的返回类型'Promise<Element>'不是有效的JSX元素。
我是否遗漏了一些明显的东西？这是我可以在某种程度上消除的Lint错误吗？或者可能是版本问题？ 关于正确方向的任何提示都将不胜感激。
英文:
According to the docs, this is a typical fetch with Suspense pattern (a bit simplified).-
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>
);
}
It actually works fine, but Visual Studio Code keeps complaining on
<Albums promise={albumData} />
due to
Its return type 'Promise<Element>' is not a valid JSX element.
Am I missing something obvious here? Is this a Lint error that I can somehow silence? Or maybe a versions issue? Any tip on the right direction is much appreciated.
答案1
得分: 1
The NextJS documentation states that this is a known TypeScript error that is being worked on. From the docs here:
Async Server Component TypeScript Error
An async Server Components will cause a 'Promise<Element>' is not a valid JSX element type error where it is used.
This is a known issue with TypeScript and is being worked on upstream.
As a temporary workaround, you can add {/* @ts-expect-error Async Server Component */} above the component to disable type checking for it.
英文:
The NextJS documentation states that this is a known TypeScript error that is being worked on. From the docs here:
> Async Server Component TypeScript Error
>
> An async Server Components will cause a 'Promise<Element>' is not a valid JSX element type error where it is used.
This is a known issue with TypeScript and is being worked on upstream.
As a temporary workaround, you can add {/* @ts-expect-error Async Server Component */} above the component to disable type checking for it.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论