I'm encountering a type error when deploying my Next.js application to Vercel. The error message is as follows:
Type error: Type ' ({ params }: DashboardPageProps) = Promise' is not assignable to type 'FC<.DashboardPageProps>'
Type 'Promise‹Element>' is not assignable to type 'ReactElement<any, any>
I have a page component defined in ./app/(dashboard)/[storeId]/(routes)/page.tsx.
The component is intended to fetch some data asynchronously and render it. However, I'm running into this type error during the deployment process.
Here’s the relevant code from my page.tsx
file:
// imports
interface DashboardPageProps {
params: { storeId: string }
}
const DashboardPage: React.FC<DashboardPageProps> = async ({
params
}) => {
const totalRevenue = await getTotalRevenue(params.storeId);
const salesCount = await getSalesCount(params.storeId);
const stockCount = await getStockCount(params.storeId);
const graphRevenue = await getGraphRevenue(params.storeId)
return (
//content
)
Nodejs Version: 21.0
Repository: Github Repository Link
Type React.FC
is used with ordinary (client) React components, in your code DashboardPage seem to be server component (returning promise) and thus isn't compatible with React.FC
. To make error go away you just need to remove React.FC