将React Hooks代码转TypeScript时出现No overload matches this call错误

你给Material UI的FormControl组件传递了它不支持的htmlFor属性，触发了TypeScript类型校验失败。htmlFor是原生<label>标签的专属属性，FormControl的Props类型定义中没有包含这个字段，所以会抛出重载不匹配的错误。

• 方案1（推荐）：直接删除FormControl标签上的htmlFor属性
  你已经给内部的TextField指定了id="source"，TextField内部已经自动实现了label和输入框的关联逻辑，不需要在父级FormControl上额外加htmlFor，修改后代码如下：

  <FormControl className={classes.formControl}>
    <TextField
      id="source"
      disabled={true}
      value={linkSettings.source}
      label={<Trans i18nKey="form.linkForm.sourceNode">Source Node</Trans>}
    />
  </FormControl>
  

• 方案2（仅临时调试用）：类型断言绕过校验
  如果有特殊场景必须传递该自定义属性，可以用类型断言强制绕过TS校验：

  <FormControl 
    className={classes.formControl} 
    {...{ htmlFor: "source" } as any}
  >
    <TextField
      id="source"
      disabled={true}
      value={linkSettings.source}
      label={<Trans i18nKey="form.linkForm.sourceNode">Source Node</Trans>}
    />
  </FormControl>
  

注：方案2属于强制跳过类型校验，存在类型安全隐患，非必要不要使用

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