Next.js结合Formik+TypeScript开发报category属性不存在错误如何解决？

该报错是TypeScript类型校验不通过导致的，和运行时代码无关，因此你可以正常使用表单功能，但构建阶段会抛出错误。核心原因是TS无法识别你传入AutoLeadForm的category等自定义属性，认为组件不接收该类参数，常见触发场景和修复方案如下：

• 场景1：错误将Formik内部注入属性类型放到了外层组件入参定义中
  FormikProps<FormValues>是Formik组件渲染内部表单项时自动注入的属性集合（包含errors、touched、setFieldValue等），如果你是直接在外部调用<AutoLeadForm />，而非将其作为Formik的component/render参数传入，不需要将FormikProps交叉到外层组件的入参类型中。

你可以将组件逻辑拆为两层：外层仅接收自定义的AutoLeadFormProps，内部包裹Formik组件，在Formik的渲染回调中获取FormikProps使用即可，示例代码如下：

// 仅定义外部需要传入的属性类型
interface AutoLeadFormProps {
  category: string;
  loading: boolean;
  submitHandler: (values: FormValues) => Promise<void> | void;
  // 其他你外部传入的属性依次声明
  errorMessage?: string;
  buttonVariant?: string;
  showRandomCounter?: boolean;
  classNameField?: string;
  classNameButton?: string;
  isPopup?: boolean;
  isInArticle?: boolean;
  randomCounter?: number;
}

const AutoLeadForm = (props: AutoLeadFormProps) => {
  const router = useRouter();
  return (
    <Formik<FormValues>
      initialValues={{/* 你的表单初始值 */}}
      onSubmit={props.submitHandler}
    >
      {(formikProps: FormikProps<FormValues>) => {
        // 在内部回调中取Formik注入的属性
        const { errors, touched, setFieldValue } = formikProps;
        // 合并外部传入的props和内部Formik属性写表单渲染逻辑
        const {
          category,
          loading,
          showRandomCounter,
          classNameField,
          classNameButton,
          isPopup = false,
          isInArticle = false,
          randomCounter,
        } = props;
        return <form>{/* 表单内容 */}</form>
      }}
    </Formik>
  )
}

• 场景2：使用withFormik高阶组件包裹时未正确指定泛型
  如果你是通过withFormik高阶函数生成AutoLeadForm，需要手动给高阶函数指定自定义Props的泛型，否则导出的组件默认只会识别Formik配置属性，不会识别你自定义的category等属性，修复示例：

const AutoLeadForm = withFormik<AutoLeadFormProps, FormValues>({
  mapPropsToValues: (props) => {
    // 此处可正常拿到category等自定义props
    return {}
  },
  handleSubmit: (values, { props }) => {
    props.submitHandler(values)
  }
})(InternalFormComponent)

• 场景3：AutoLeadFormProps定义遗漏属性
  检查你的AutoLeadFormProps接口/类型别名定义，确认category等所有外部传入的属性都有对应的类型声明，没有拼写错误。

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