'标头不能用作 JSX 组件

Question

'Header '不能用作JSX组件。它的返回返回类型'Promise'不是一个有效的JSX元素。类型'Promise'从类型'ReactElement<any,>'中缺少以下属性:Type, props, key

import Image from "next/image";
import Link from "next/link";
import LogoutButton from "./LogoutButton";
import { unstable_getServerSession } from "next-auth/next";
async function Header() {
const session = await unstable_getServerSession();
if (session)
return (
<header className="sticky top-0 z-50 bg-white flex justify-between items-center p-10 shadow-sm">
<div className="flex space-x-2">
<Image
className="rounded-full mx-2 object-contain"
height={10}
width={50}
src={session.user?.image!}
alt="Profile Picture"
/>
<div>
<p className="text-blue-400">Logged in as:</p>
<p className="font-bold text-lg">{session.user?.name}</p>
</div>
</div>
<LogoutButton />
</header>
);
return (
<header className="sticky top-0 z-50 bg-white flex justify-center items-center p-10 shadow-sm">
<div className="flex flex-col items-center space-y-5">
<div className="flex space-x-2 items-center">
<Image
src="https://links.papareact.com/jne"
height={10}
width={50}
alt="Logo"
/>
<p className="text-blue-400">Welcome to Meta Messenger</p>
</div>
<Link
href="/auth/signin"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
Sign In
</Link>
</div>
</header>
);
}
export default Header;

我尝试使用async函数

Answer 1

异步函数组件的类型还没有完全登陆。你可以订阅这个PR.一旦它登陆升级@types/react和typescript应该会成功。

在此之前，您可以进行类型转换，例如

export default Header as unknown as () => JSX.Element;

或

在每个用法网站上都这样做:

{/* @ts-expect-error Server Component */}
<Header />