TypeScript+MaterialUI：传递含特定Props的子表单组件数组遇类型问题

问题分析 #

你遇到的核心矛盾是：TypeScript 依据CustomFormProps的定义判定hasNext/hasPrev/hasSubmit为必填属性，但你的表单组件已经设置了默认值，却无法让 TypeScript 识别这一点，导致渲染<Current />时触发类型错误。

解决方法 #

1. 修正类型定义（最简单直接的方案）

既然你的表单组件已经为这些属性设置了默认值，说明它们本质是可选属性，直接修改CustomFormProps的类型定义：

interface CustomFormProps {
  hasNext?: boolean;
  hasPrev?: boolean;
  hasSubmit?: boolean;
}

修改后，TypeScript 会自动识别这些属性无需强制传递，<Current />的类型错误会直接消失，同时保留组件自行管理默认值的逻辑。

2. 显式声明默认 props（更严谨的 TypeScript 写法）

如果你希望保持CustomFormProps的属性为必填语义，可通过显式声明组件默认 props 的方式让 TypeScript 识别：

const FormOne: React.FC<CustomFormProps> = ({ hasNext, hasPrev, hasSubmit }) => {
  return (
    <Box>
      <Typography>
        {hasNext ? "NEXT" : ""}
        {hasPrev ? "PREV" : ""}
        {hasSubmit ? "SUBMIT" : ""}
      </Typography>
    </Box>
  );
};

// 显式绑定默认 props
FormOne.defaultProps = {
  hasNext: true,
  hasPrev: true,
  hasSubmit: true,
};

然后修改FormDialogProps中的steps类型，使用Partial包裹原属性类型：

interface FormDialogProps {
    toggleDialog: () => void | undefined,
    isOpen: boolean,
    headerText: string,
    stepLabels: Array<string>,
    steps: React.ComponentType<Partial<CustomFormProps>>[]
}

额外优化建议 #

补充步骤切换逻辑，避免索引越界，同时优化底部按钮的交互：

const next = () => {
  if (currentForm < props.steps.length - 1) {
    setCurrentForm(prev => prev + 1);
  }
};

const previous = () => {
  if (currentForm > 0) {
    setCurrentForm(prev => prev - 1);
  }
};

// 渲染 DialogActions 时根据当前步骤切换按钮
<DialogActions sx={{ borderTop: `1px solid ${theme.colors.gold.neutral}`, backgroundColor: theme.colors.gold.neutral, padding: "20px" }}>
  <Button variant="outlined" onClick={previous} disabled={currentForm === 0} sx={{ color: "black" }}>Previous</Button>
  {currentForm < props.steps.length - 1 ? (
    <Button variant="outlined" onClick={next} sx={{ color: "black" }}>Next</Button>
  ) : (
    <Button variant="outlined" onClick={submit} sx={{ color: "black" }}>Submit</Button>
  )}
</DialogActions>

内容的提问来源于stack exchange，提问作者Chase Thorpe