Next.js开发报错：'Card'无法作为JSX组件使用

错误信息 #

'Card' cannot be used as a JSX component. Its type 'OverridableComponent<CardTypeMap<{}, "div">>' is not a valid JSX element type. Type 'OverridableComponent<CardTypeMap<{}, "div">>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'. Type 'Element' is not assignable to type 'ReactNode'

相关代码片段 #

return (
  <Card>
    <CardContent>
      <Box sx={{ display: 'flex', marginBottom: 5.5, alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <Avatar sx={{ boxShadow: 3, marginRight: 4, color: 'common.white', backgroundColor: `${color}.main` }}>
          {icon}
        </Avatar>
        <IconButton size='small' aria-label='settings' className='card-more-options' sx={{ color: 'text.secondary' }}>
          <DotsVertical />
        </IconButton>
      </Box>
      <Typography sx={{ fontWeight: 600, fontSize: '0.875rem' }}>{title}</Typography>
      <Box sx={{ marginTop: 1.5, display: 'flex', flexWrap: 'wrap', marginBottom: 1.5, alignItems: 'flex-start' }}>
        <Typography variant='h6' sx={{ mr: 2 }}>
          {stats}
        </Typography>
        <Typography
          component='sup'
          variant='caption'
          sx={{ color: trend === 'positive' ? 'success.main' : 'error.main' }}
        >
          {trendNumber}
        </Typography>
      </Box>
      <Typography variant='caption'>{subtitle}</Typography>
    </CardContent>
  </Card>
)
}

解决方案 #

1. 统一React与@types/react版本 #

这个错误常出现在React核心包和其类型包版本不匹配时。打开package.json，确保react和@types/react的版本完全一致（比如都为18.x.x），修改后执行：

npm install
# 或 yarn install

2. 更新Material-UI相关依赖 #

若使用MUI v5，确保所有MUI包版本统一，避免版本差异导致类型冲突：

npm install @mui/material@latest @emotion/react@latest @emotion/styled@latest
# 或 yarn upgrade @mui/material @emotion/react @emotion/styled --latest

3. 检查组件导入方式 #

确认Card组件的导入路径正确，需从@mui/material导入：

import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
// 其他组件同理

4. 清除TypeScript缓存 #

VS Code的TypeScript服务可能缓存旧类型信息，执行以下操作：

• 打开命令面板（Ctrl+Shift+P / Cmd+Shift+P）
• 选择TypeScript: Restart TS Server
• 删除项目根目录的.next和node_modules/.cache文件夹，重新构建项目

5. 调整tsconfig.json配置 #

确保tsconfig.json包含正确的React类型配置：

{
  "compilerOptions": {
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "types": ["react", "react-dom"]
  }
}

内容的提问来源于stack exchange，提问作者Lê Ngọ