承诺＆lt; element＆gt;不是有效的JSX元素，可以转换Promise＆lt; element＆gt;到元素

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)

项目组件是这样的：

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

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

getItemdata函数是这样：

async function getItemData(item: string) {

    if (item === "") {
        return {
            name: "Error",
            description: "Couldn't fetch the latest items :( ..."
        }
    }

    const itemData = fetch("/api/items/getItem/", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            id: item
        })
    })
    .catch(err => {
        console.error(err);
        throw new Error("Failed to get item data");
    });

    const res = (await itemData).json();
    return res;

}

我该怎么做才能转换promise＆lt; element＆gt; to element，我尝试了。我尝试键入函数，它也不起作用，每当我尝试使用item组件时，它就会出现错误。

如果很重要，我将使用react next.js与打字稿

Answer 1

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

另外我还添加typescript角色：

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

Answer 2

使用此命令安装最新版本的Typescript和 @type/react：

npm install typescript@latest @types/react@latest

它将解决问题。
安装后，请确保重新启动您的代码编辑器。这解决了问题。
另外，如果组件在顶部具有“使用客户端”，则将其删除。

Answer 3

确保您在page.tsx中使用getItemdata函数，这是因为JSX或TSX函数不支持异步。在这里，我给您一个示例，假设搜索是从参数完成的

async function getItemData(item: string) {

    if (item === "") {
        return {
            name: "Error",
            description: "Couldn't fetch the latest items :( ..."
        }
    }

    const itemData = fetch("/api/items/getItem/", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            id: item
        })
    })
    .catch(err => {
        console.error(err);
        throw new Error("Failed to get item data");
    });

    const res = (await itemData).json();
    return res;

}
export default async function Page({params}: Props) {
const data = await getItemData(params)
  return (
    <>
      <Item data={data} />
    </>
  )
}

const Item = (data: ItsProps) => {    
    return (
    <Button className="item">
        <ItemContent name={data.name} description={data.description} />
    </Button>);
}