'Promise<Element>' 형식에 'ReactElement<any, any>' 형식의 type, props, key 속성이 없습니다.

NextJs에서는 서버 컴포넌트에서 fetch를 하기 위해 async와 await를 사용할 수 있다.

// getData.ts

export async function getData() {
	const data = await fetch('https://www.example.com')...
  	return data;
}

// components/user.tsx

export default async function User() {
	const data = await getData();
  	return (...)
}

// app/page.tsx

export default function Home() {
	return (
    	<User />
      // 🚨 function User(): Promise<React.JSX.Element>
    )
}

위의 page 파일처럼 컴포넌트 자체에 async를 사용한 User 컴포넌트를 임포트하여 사용하면 이러한 에러가 발생한다.

Next.js 13의 서버 컴포넌트를 async 함수로 사용하면 JSX가 아닌 Promise를 반환하는데 TypeScript는 아직까지 React 컴포넌트는 JSX만 반환해야한다고 학습되어있어 이런 문제가 발생한다고 한다.
홈페이지에는 해당 내용이 있다가 사라졌는데 아직까지는 조금 불안정한 상태인 것 같지만 조만간 해결될 이슈인 것 같다.

그래서 해결 방법은!! 🧐

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

위의 코드를 적어 주면 된다!

export default function Home() {
	return (
      	{/* @ts-expect-error Async Server Component */}
    	<User />
    )
}