根据文档,这是一个典型的fetch
与Suspense
模式(有点简化)。
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
错误,我可以以某种方式沉默?或者是版本问题?**任何正确的方向是非常赞赏。
1条答案
按热度按时间mctunoxg1#
NextJS文档指出,这是一个正在处理的已知TypeScript错误。从这里的docs:
异步服务器组件TypeScript错误
异步服务器组件将在使用“Promise”时导致“Promise”不是有效的JSX元素类型错误。这是TypeScript的一个已知问题,目前正在上游解决。作为临时解决方法,您可以在组件上方添加{/* @ts-expect-error Async Server Component */},以禁用对该组件的类型检查。