将Next.js+MUI项目转TS时，TSC因Props交叉类型崩溃求助

问题根源 #

BoxProps本身已经内置了sx: SxProps类型字段，手动在自定义Props中重复声明sx会导致交叉类型出现重复的复杂属性。TypeScript类型检查器需要处理大量冲突类型的合并逻辑，进而引发性能瓶颈，甚至出现实时类型检查停止、TSC冻结的情况。

修正方案 #

移除自定义Props中的sx声明，直接复用BoxProps中已有的sx类型定义，避免类型重复：

import { Box, BoxProps } from '@mui/material'
import type React from 'react'

type Props = {
  onSubmit: (e: React.FormEvent) => void
  children: React.ReactNode
} & BoxProps

export const Form = ({ onSubmit, ...props }: Props) => {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onSubmit(e)
  }

  return (
    <Box
      component="form"
      onSubmit={handleSubmit}
      {...props}
    />
  )
}

额外优化提示 #

如果需要强制children为必填属性，建议通过Required工具类型基于BoxProps来声明，保持类型与MUI的一致性：

type Props = {
  onSubmit: (e: React.FormEvent) => void
} & Required<Pick<BoxProps, 'children'>> & Omit<BoxProps, 'children'>

这种写法既保留了BoxProps的所有属性，又强制children字段为必填项，避免手动声明可能带来的类型不一致问题。

内容的提问来源于stack exchange，提问作者xandert.93