如何修复Next.js与MUI构建过程中的类型错误？

安全阿岳

2026-7-29

问题：Next.js构建时MUI类型报错（',' expected）

问题背景

已执行npm install @mui/material @emotion/react @emotion/server安装依赖
构建Next.js应用时，在代码检查与类型验证阶段触发报错

报错详情

info  - Linting and checking validity of types ...Failed to compile.

./node_modules/@mui/base/useMenu/useMenu.d.ts:3:15
Type error: ',' expected.

  1 | import { MenuItemMetadata, UseMenuListboxSlotProps, UseMenuParameters } from './useMenu.types';
  2 | import { EventHandlers } from '../utils';
> 3 | import { type MenuUnstyledContextType } from '../MenuUnstyled';
    |               ^
  4 | /**
  5 |  *

当前ESLint配置

{
  "extends": ["next/core-web-vitals", "prettier"],
  "rules": {
    "object-curly-newline": [
      "error",
      {
        "ObjectExpression": {
          "minProperties": 1
        }
      }
    ],
    "arrow-body-style": ["error", "as-needed"],
    "@next/next/no-img-element": "off"
  }
}

解决方法

这个错误源于你的TypeScript版本不支持import type语法（该语法从TypeScript 4.5版本开始支持），或tsconfig.json未启用对应配置，可通过以下方式解决：

升级TypeScript版本
执行命令更新到最新兼容版：
```
npm install typescript@latest --save-dev
```

调整tsconfig.json配置
确保compilerOptions包含以下设置：

{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node",
    "target": "es2017",
    "skipLibCheck": true // 可选：跳过node_modules类型文件检查，快速绕过问题
  }
}