React.FC组件用async/await遇TypeScript错误，求解决方法

问题原因 #

直接给React函数组件添加async关键字，会让组件返回Promise<Element>，但React.FC类型要求组件必须直接返回ReactElement（即JSX元素），这就导致了TypeScript的类型不匹配错误。

你提到YouTube上类似代码无报错，大概率是因为对方用了Next.js App Router的Server Component——这类组件允许直接使用async/await，不需要遵循客户端组件的FC类型约束，自然不会触发TS错误。

解决方案 #

方案1：如果是Next.js App Router的Server Component

直接移除React.FC类型标注即可，Next.js的Server Component会自动处理异步逻辑，无需额外状态管理：

import prismadb from '@/lib/prismadb'

interface DashboardPageProps {
    params: { storeId: string }
}

// 去掉React.FC类型标注，直接定义异步组件
const DashboardPage = async ({ params }: DashboardPageProps) => {
    const store = await prismadb.store.findFirst({
        where: {
            id: params.storeId
        }
    })
    return <div>Active Store: {store?.name}</div>
}

export default DashboardPage

方案2：如果是客户端组件（需要交互/使用React hooks）

客户端组件不能直接用async，必须通过useEffect结合状态管理来处理异步请求：

import { useState, useEffect } from 'react'
import prismadb from '@/lib/prismadb'

interface DashboardPageProps {
    params: { storeId: string }
}

const DashboardPage: React.FC<DashboardPageProps> = ({ params }) => {
    const [store, setStore] = useState<{ name?: string } | null>(null)
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        // 定义内部异步函数处理数据请求
        const fetchStore = async () => {
            try {
                const data = await prismadb.store.findFirst({
                    where: { id: params.storeId }
                })
                setStore(data)
            } catch (error) {
                console.error('获取店铺数据失败:', error)
            } finally {
                setLoading(false)
            }
        }

        fetchStore()
    }, [params.storeId]) // 依赖项变化时重新请求

    if (loading) return <div>加载中...</div>
    return <div>Active Store: {store?.name}</div>
}

export default DashboardPage

内容的提问来源于stack exchange，提问作者Vito Scarletta