React中useRef报错‘() => void无法赋值给undefined’的原因？

云原生阿岚

2026-7-1

解决useRef赋值函数时的TypeScript类型错误

报错缘由

这个错误是TypeScript的类型校验机制导致的：

当你用const unMount = useRef();声明ref时，没有指定泛型类型，TypeScript会根据初始值（这里是undefined）自动推断unMount.current的类型为undefined。
后续你给unMount.current赋值了一个() => void类型的函数，两种类型不兼容，因此抛出Type '() => void' is not assignable to type 'undefined'的错误。

解决方案

有两种简单的方式修复这个类型问题：

1. 显式指定useRef的泛型类型

直接在声明useRef时，明确它的current属性可以是无返回值函数或者undefined：

const [counter, setCounter] = useState(5);
// 指定泛型类型，允许current为函数或undefined
const unMount = useRef<(() => void) | undefined>();

unMount.current = () => {
  console.log(`The counter is: ${counter}`);
};

useEffect(() => {
  return () => {
    if (unMount.current)
      unMount.current();
  };
}, [])

2. 给useRef设置null初始值并指定泛型

也可以给useRef一个null初始值，同时指定泛型类型，后续赋值函数时就不会触发类型错误：

const [counter, setCounter] = useState(5);
// 指定泛型类型，初始值设为null
const unMount = useRef<(() => void) | null>(null);

unMount.current = () => {
  console.log(`The counter is: ${counter}`);
};

useEffect(() => {
  return () => {
    if (unMount.current)
      unMount.current();
  };
}, [])