TS函数组件useRef调用Spinner类方法报forceUpdateHandler不存在

将CodePen示例中的App组件改写为TypeScript版React函数组件时，编译抛出TS2339类型错误：

Property 'forceUpdateHandler' does not exist on type 'MutableRefObject<Spinner | null>'
报错指向handleClick回调函数内，通过_child1、_child2、_child3三个useRef声明的ref对象直接调用forceUpdateHandler()方法的代码行。

• 对ref的使用逻辑有误：useRef创建的ref对象，挂载的组件实例存储在ref.current字段下，直接访问ref对象本身无法获取实例属性与方法
• TypeScript类型校验未通过：默认类型推导无法识别自定义类组件上挂载的forceUpdateHandler自定义方法，需要补充明确的类型声明

1. 修正Spinner类组件类型声明 #

在Spinner类内部显式声明自定义实例方法的类型，让TS可以识别该属性：

import React from 'react';

export default class Spinner extends React.Component {
  // 声明自定义方法类型
  forceUpdateHandler: () => void;

  constructor(props: Record<string, never>) {
    super(props);
    this.forceUpdateHandler = () => {
      this.forceUpdate();
    };
  }

  render() {
    return <div className="spinner">加载组件</div>;
  }
}

2. 修正App组件内ref的调用逻辑 #

声明ref时显式传入Spinner作为泛型参数，调用实例方法时通过ref.current访问，同时增加空值判断避免运行时报错：

import React, { useRef } from 'react';
import Spinner from './Spinner';

export default function App() {
  // 给useRef指定泛型类型，明确current存储的是Spinner实例
  const _child1 = useRef<Spinner | null>(null);
  const _child2 = useRef<Spinner | null>(null);
  const _child3 = useRef<Spinner | null>(null);

  const handleClick = () => {
    // 通过current访问实例，可选链规避ref未挂载的空值问题
    _child1.current?.forceUpdateHandler();
    _child2.current?.forceUpdateHandler();
    _child3.current?.forceUpdateHandler();
  };

  return (
    <div className="app">
      <button onClick={handleClick}>触发子组件强制刷新</button>
      <Spinner ref={_child1} />
      <Spinner ref={_child2} />
      <Spinner ref={_child3} />
    </div>
  );
}

• 所有通过ref获取的DOM节点、类组件实例，都必须通过ref.current访问，不能直接读取ref对象本身
• 给useRef传入对应类型的泛型参数，才能获得完整的类型提示与校验
• 调用ref上的方法前建议增加空值判断（可选链?.是最简实现），避免组件还未挂载时current为null抛出运行时错误
• 类组件上挂载的自定义实例属性、方法，都需要在类内部做类型声明，否则TS会判定属性不存在

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