React Fiber Mesh使用useRef时'ref.current'可能为undefined的TypeScript问题

问题场景 #

使用Next.js + TypeScript + React Three Fiber开发时，useFrame中操作ref.current.rotation出现TypeScript错误：'ref.current' is possibly 'undefined'，项目可正常运行但IDE有红色标记。

解决方法 #

方法一：指定Ref类型并使用非空断言 #

给useRef明确指定Three.js的Mesh类型，并用非空断言（!）告知TypeScript该Ref一定会被赋值：

1. 引入Three.js的Mesh类型：

import { Mesh } from 'three'

2. 修改Ref的定义：

const ref = useRef<Mesh>(null!)

方法二：添加空值检查（更安全） #

在useFrame回调中先判断ref.current是否存在，避免潜在的空值风险：

useFrame((_, delta) => {  
  if (!ref.current) return
  ref.current.rotation.x += delta
  ref.current.rotation.y += 0.5 * delta
})

方法三：结合React组件类型推导 #

如果不想直接引入Three.js类型，也可以通过组件类型推导Ref的类型：

import { mesh } from '@react-three/fiber'

// 推导mesh组件的实例类型
type MeshInstance = InstanceType<typeof mesh>
const ref = useRef<MeshInstance>(null!)

注意事项 #

确保已安装Three.js的类型定义包：

npm install @types/three --save-dev

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