Promise<Element> 不是有效的 JSX 元素，正在将 Promise<Element> 转换为 Element

Question

我正在尝试使用该Item组件，但出现以下错误：

(alias) const Item: (id: string) => Promise<JSX.Element>
import Item
Type '{}' is not assignable to type 'string'.ts(2322)
'Item' cannot be used as a JSX component.
  Its return type 'Promise<Element>' is not a valid JSX element.
    Type 'Promise<Element>' is missing the following properties from type 'ReactElement<any, any>': type, props, key ts(2786)

Item 组件是这样的：

(alias) const Item: (id: string) => Promise<JSX.Element>
import Item
Type '{}' is not assignable to type 'string'.ts(2322)
'Item' cannot be used as a JSX component.
  Its return type 'Promise<Element>' is not a valid JSX element.
    Type 'Promise<Element>' is missing the following properties from type 'ReactElement<any, any>': type, props, key ts(2786)

函数getItemData是这样的：

const Item = async (id: string) => {    
    const itemData = await getItemData(id);

    return (<Button className="item">
        <ItemContent name={itemData.name} description={itemData.description} />
    </Button>);
}

我可以做什么来转换Promise<Element>为Element，我尝试过.then(res => res.json())，它不起作用，我尝试输入函数，它也不起作用，每当我尝试使用该Item组件时，它都会给出错误。

如果很重要，我会使用 React Next.js 和 Typescript

Answer 1

要将异步服务器组件与 TypeScript 一起使用，请确保您使用的是 TypeScript 5.1.3 或更高版本以及 @types/react 18.2.8 或更高版本。它来自官方下一个文档

我还在组件之前添加了打字稿角色：

{/* @ts-expect-error Async Server Component */}