React TypeScript传递Props报错TS2322：属性inputs类型不匹配

API 探路者

2026-8-18

错误原因分析

你遇到的TS2322错误核心是组件Props类型定义与实际传递的Props结构不匹配：

你给BasicForm组件指定的类型是React.FC<IFormInput[]>，这表示组件接收的Props本身就是一个IFormInput数组；
但在App.tsx中，你是通过inputs={input}传递一个包含inputs属性的对象，TypeScript检测到两者结构不一致，因此报错。

解决方案

修改BasicForm组件的Props类型定义，让它匹配实际传递的结构：

步骤1：定义组件Props接口（或直接使用字面量类型）

在BasicForm组件文件中，先定义符合实际传递结构的Props类型：

// 方式一：单独定义接口
interface BasicFormProps {
  inputs: IFormInput[];
}

// 方式二：直接使用字面量类型（无需单独定义接口）
// React.FC<{ inputs: IFormInput[] }>

步骤2：修改组件的类型声明与参数

将组件的类型改为上述定义的Props类型，并通过解构获取inputs属性：

import { FormEvent } from "react";
import { IFormInput } from "../../utils/types/IFormInput";
import FormInput from "./elements/formInput";

// 使用方式一的接口
interface BasicFormProps {
  inputs: IFormInput[];
}

const BasicForm: React.FC<BasicFormProps> = ({ inputs }) => {
  function submitForm(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
  }

  return (
    <div className="basicForm">
      <form onSubmit={submitForm}>
        {inputs.map((input) => (
          <FormInput {...input} key={input.id}></FormInput>
        ))}
      </form>
    </div>
  );
};
export default BasicForm;