TypeScript中如何将React ref传入document range的selectNodeContents方法

DevOps 小满

2026-10-6

问题原因

该报错属于TypeScript的类型校验触发的提示：你定义useRef<HTMLDivElement>(null)时，TypeScript会推导codeRef.current的类型为HTMLDivElement | null，而document.Range.selectNodeContents()方法要求入参必须为Node类型，不接受null值，因此抛出类型错误。
你当前的业务场景下实际不会出现null的情况：点击事件绑定在和ref同一个div元素上，只有div完成挂载渲染后才会触发点击事件，此时codeRef.current必然已被赋值为对应DOM节点，只是TypeScript无法自动识别这个逻辑关联。

解决方案

提供3种不同场景的可用方案：

方案1：提前空值判断（最安全，推荐优先使用）
在调用方法前先做空值校验，TypeScript会自动收窄codeRef.current的类型，同时也能避免后续业务逻辑变动引发的运行时空指针问题。
修改后的点击函数代码：

const clickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
    // 新增空值判断
    if (!codeRef.current) return;
    let range = document.createRange();
    range.selectNodeContents(codeRef.current); // 此时TS已经识别current非空，无报错
    window.getSelection()?.removeAllRanges();
    window.getSelection()?.addRange(range);

    navigator?.clipboard?.writeText(codeString);
};

方案2：非空断言（适合确认逻辑上不会出现null的场景，写法简洁）
使用TS的非空断言操作符!，手动告诉编译器你确认此处codeRef.current一定非空，不需要做空值校验。
仅需修改报错行代码：
```
range.selectNodeContents(codeRef.current!);
```
方案3：类型断言
强制将codeRef.current的类型转为HTMLDivElement，效果和非空断言一致：
```
range.selectNodeContents(codeRef.current as HTMLDivElement);
```