React组件泛型类型推断总是报错怎么办？

端木一可提问于 2026-02-09 16:42:49 阅读 38

组件

在写一个可复用的表单组件时遇到了类型问题，明明定义了泛型接口，但TypeScript老是提示错误：Type 'string' is not assignable to type 'never'。

我尝试这样定义组件：

interface FormProps<T> {
  initialValues: T;
  onSubmit: (data: T) => void;
}

function Form<T>({ initialValues, onSubmit }: FormProps<T>) {
  const [formData, setFormData] = useState(initialValues);
  // ...
  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      onSubmit(formData); // 这里报错
    }}>
    </form>
  );
}

然后这样使用：

type UserFormType = {
  name: string;
  age: number;
};

function App() {
  return (
    <Form
      initialValues={{ name: '', age: 0 }}
      onSubmit={(data) => console.log(data.email)} // 这里居然没报错！
    />
  );
}

奇怪的是，当我在onSubmit里访问不存在的data.email时TypeScript居然没提示，但formData赋值时却提示类型错误。试过给useState添加类型注解：useState(initialValues)，但没用，到底哪里出问题了？

我来解答赞 5 收藏

反馈

2 条解答

宁蒙 Lv1

这问题我太熟悉了，典型的泛型类型推断“失灵”现场，其实不是TS瞎了，是你用法有点微妙。

核心问题出在 Form<T> 这个泛型参数 T 没有被显式指定，TS在推断时把 T 当成了 never，所以 formData 的类型变成 never，onSubmit 的参数类型也变成 never —— 于是你访问 data.email 不报错（因为 never 上访问任何属性都合法？不，其实是TS放弃推断了），但赋值时就崩了，因为 initialValues 是 { name: string; age: number }，明显不能赋给 never。

怎么修？关键是要让TS能“反向”从 props 推出 T，目前的写法TS只从 initialValues 推 T，但 onSubmit 那里完全没约束，导致它敢把 T 推成 never。

最稳妥的写法是这样：

interface FormProps {

  initialValues: T;

  onSubmit: (data: T) => void;

}



function Form>({ initialValues, onSubmit }: FormProps) {

  const [formData, setFormData] = useState(initialValues);



  return (

    
      onSubmit={(e) => {

        e.preventDefault();

        onSubmit(formData);

      }}

    >

      {/* 表单内容 */}

    

  );

}

但其实这样还不够，真正“稳”的做法是显式指定泛型参数，或者让TS能从调用处推断出 T，比如：

const Form = <T, >({ initialValues, onSubmit }: FormProps<T>) => {

  const [formData, setFormData] = useState<T>(initialValues);

  // ...

};

注意那个空尖括号 <T, >，逗号是关键！它告诉TS：这是一个泛型函数，别想偷懒推断成 never。

然后你调用的时候，TS就能从 initialValues 推出 T，此时 onSubmit 的参数类型也顺带固定了：

<Form

  initialValues={{ name: '', age: 0 }}

  onSubmit={(data) => {

    console.log(data.email); // 这时候TS就会报错了！Property 'email' does not exist on type '{ name: string; age: number; }'

  }}

/>

如果你嫌每次都要显式写 <UserFormType> 太啰嗦，也可以这样：

const Form = <T extends object>(props: FormProps<T>) => { ... }

加个 extends object 能逼TS至少推断成一个对象类型，不至于掉进 never 的坑里。

顺便吐槽一句，这种问题TS社区吵过好几轮了，官方其实知道这个“空泛型推断成never”的坑，但为了向后兼容一直没改…… 我们只能靠写法规避。

记住：泛型函数别让TS自由发挥，要么显式指定，要么加个合理约束，否则它真敢给你推个 never 出来，还一脸无辜。

2026-02-27 09:09

宇文熙恩 Lv1

问题出在泛型没有被正确约束，TypeScript推断不出来T的具体类型，导致formData是unknown或者never。

你得强制让泛型从initialValues推导出来，同时给useState加上类型。复制这个：

function Form(props: FormProps) {

  const { initialValues, onSubmit } = props;

  const [formData, setFormData] = useState(initialValues);



  return (

     {

      e.preventDefault();

      onSubmit(formData);

    }}>

      {/* 假设这里渲染一些字段 */}

    


  );

}

关键是调用的时候要确保泛型能被推导出来。你可以这样用：

function App() {

  return (

    
      initialValues={{ name: '', age: 0 }}

      onSubmit={(data) => {

        console.log(data.name); // OK

        console.log(data.email); // 这里现在会报错了！

      }}

    />

  );

}

注意：如果你写成 initialValues={{} as UserFormType} 或者手动指定泛型 <Form<UserFormType>> 也可以，但最好让TS自动推导。

核心就两点：
1. 给useState加类型注解
2. 确保initialValues有明确结构让TS能推导

不然TS根本不知道T长什么样，自然后面用data.email也不会报错——因为它认为data是any或者never。

2026-02-09 17:01