React TypeScript集成Formik使用useRef报TS2531、TS2322错误排查

根因拆解 #

• TS2531（Object is possibly 'null'）的触发逻辑
  初始化useRef(null)时，TypeScript会自动把formRef推导为MutableRefObject<null>，也就是说formRef.current的类型被硬绑定为null，本身根本不存在isValid、dirty这些Formik实例才有的属性。
  你之前写的formRef!.current.isValid，非空断言的作用对象是formRef引用本身，不是formRef.current的类型，压根没解决“current是null类型、找不到对应属性”的核心问题，所以报错一直消不掉。
• TS2322（类型不匹配）的触发逻辑
  把useRef(null)改成无参useRef()时，TypeScript会把formRef推导为MutableRefObject<undefined>。但Formik的innerRef要求传入的参数得兼容两种结构：一种是能接收FormikProps<T> | null的ref回调函数，另一种是存着FormikProps<T> | null的ref对象。你传的MutableRefObject<undefined>既不匹配Formik实例的结构，也不满足ref回调的函数签名，自然会报类型不匹配。

按以下步骤调整就能完全消掉两类报错：

1. 导入Formik的类型定义，明确表单值结构

   import { Formik, FormikProps } from 'formik';
   
   // 定义表单值的固定结构，避免类型推导模糊
   type NicknameFormValues = {
     nickname: string;
   };
   

2. 正确初始化ref，显式指定泛型和初始值

   // 明确声明ref可存的内容：挂载完成时是FormikProps实例，未挂载时是null
   const formRef = useRef<FormikProps<NicknameFormValues> | null>(null);
   

   这个类型完全匹配Formik innerRef的入参要求，不会再触发TS2322报错。
3. 调整按钮disabled逻辑的空值兼容
   因为formRef.current可能为null，访问属性前要做兜底，可选两种等价写法：
   • 显式判断，可读性更强

     disabled={!formRef.current ? true : !(formRef.current.isValid && formRef.current.dirty)}
     

   • 可选链简化写法

     disabled={!formRef.current?.isValid || !formRef.current?.dirty}
     

• 为什么formRef!.current.isValid消不掉TS2531：非空断言的位置不对，写在formRef后面只能保证formRef这个引用本身非空，没法修正formRef.current被推导为null的类型错误，TS还是识别不到你要访问的isValid、dirty属性。
• 为什么无参useRef()会触发TS2322：这个写法没给useRef传泛型，TS会自动把ref的存储类型推导为undefined，和Formik要求的ref结构完全不兼容，匹配不上innerRef的入参签名。

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