TypeScript中useRef绑定react-idle-timer报TS2769错误如何解决

• 核心是旧版react-idle-timer的类组件类型定义存在缺陷：它将ref属性声明为回调函数和RefObject的交叉类型，和React默认useRef返回的MutableRefObject<IdleTimer | null>类型不匹配
• TypeScript会严格校验ref的可空性：你声明的ref允许值为null，但IdleTimer组件的ref期望接收永远指向IdleTimer实例的引用，不接受null类型，因此触发TS2769类型不匹配报错

你可以根据项目场景选择以下任意一种方案解决：

方案1：快速类型断言（最便捷，适合临时兼容） #

直接在传递ref时做类型断言，告诉TypeScript该ref符合IdleTimer的类型要求：

import { useRef, Ref } from 'react';
import IdleTimer from 'react-idle-timer';

function IdleTimerContainer() {
    const idleTimerRef = useRef<IdleTimer | null>(null);
    function onIdle() {
        console.log('user is idle');
    }
    return (
        <div>
            <IdleTimer 
                timeout={5 * 1000} 
                onIdle={onIdle} 
                ref={idleTimerRef as Ref<IdleTimer>} 
            />
        </div>
    );
}
export default IdleTimerContainer;

方案2：使用回调ref（无类型hack，更严谨） #

用回调形式的ref传递，天然符合组件的类型要求，不需要做类型断言：

import { useRef } from 'react';
import IdleTimer from 'react-idle-timer';

function IdleTimerContainer() {
    const idleTimerRef = useRef<IdleTimer | null>(null);
    function onIdle() {
        console.log('user is idle');
    }
    return (
        <div>
            <IdleTimer 
                timeout={5 * 1000} 
                onIdle={onIdle} 
                ref={(instance) => { idleTimerRef.current = instance }} 
            />
        </div>
    );
}
export default IdleTimerContainer;

方案3：升级为新版API（推荐长期使用） #

注意：如果你的项目不需要兼容旧版react-idle-timer的类组件用法，优先选择该方案，完全避开类型问题的同时写法更简洁
新版react-idle-timer已经完全弃用类组件写法，改用Hook API，用法如下：

import { useIdleTimer } from 'react-idle-timer'

function IdleTimerContainer() {
  const onIdle = () => {
    console.log('user is idle')
  }

  useIdleTimer({
    timeout: 5 * 1000,
    onIdle
  })

  return <div />
}
export default IdleTimerContainer

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