React Three Fiber+TypeScript报错：Object3D不存在指定属性

我用React Three Fiber结合TypeScript开发React应用，编写了如下代码：

return (
    <group ref={group} dispose={null}>
      <scene name="Scene" {...props}>
        <mesh
          ref={mesh}
          scale={1.5}
          name="Object_0"
          morphTargetDictionary={nodes.Object_0.morphTargetDictionary}
          morphTargetInfluences={nodes.Object_0.morphTargetInfluences}
          rotation={[Math.PI / 2, 0, 0]}
          geometry={nodes.Object_0.geometry}
          material={materials.Material_0_COLOR_0}
        />
      </scene>
    </group>
  );

但始终遇到错误：Property: 'morphTargetDictionary' does not exist on type 'Object3D<Event>'，morphTargetInfluences和geometry属性也出现同类错误。我尝试通过以下代码扩展@types/three中的Object3D接口添加这些属性，但没有效果：

declare module '@types/three' {
  export default interface Object3D {
    morphTargetDictionary: number;
    morphTargetInfluences: number
    geometry: string
  }
}

问题根源 #

错误扩展了Object3D接口，但nodes.Object_0实际对应<mesh>组件，属于Mesh类型，morphTargetDictionary、morphTargetInfluences、geometry都是Mesh的属性，且你定义的类型也不符合Three.js实际规范（比如morphTargetDictionary是Record<string, number>而非number）。

正确解决方案 #

1. 全局扩展Mesh类型（推荐）

在项目的全局类型文件中（比如src/global.d.ts），扩展Three.js的Mesh接口，使用正确的类型定义：

declare module 'three' {
  interface Mesh {
    morphTargetDictionary?: Record<string, number>;
    morphTargetInfluences?: number[];
    geometry?: THREE.BufferGeometry;
  }
}

注意：不要使用export default interface，直接在three模块下扩展Mesh接口即可。

2. 局部类型断言（快速临时解决）

如果不想全局修改类型，可以在使用时直接将nodes.Object_0断言为Mesh类型：

<mesh
  ref={mesh}
  scale={1.5}
  name="Object_0"
  morphTargetDictionary={(nodes.Object_0 as THREE.Mesh).morphTargetDictionary}
  morphTargetInfluences={(nodes.Object_0 as THREE.Mesh).morphTargetInfluences}
  rotation={[Math.PI / 2, 0, 0]}
  geometry={(nodes.Object_0 as THREE.Mesh).geometry}
  material={materials.Material_0_COLOR_0}
/>

3. 检查模型生成工具的类型文件

如果是用gltfjsx或@react-three/drei生成的模型代码，这类工具通常会自动生成对应的.d.ts类型文件，确保你已经正确引入该文件，避免手动扩展类型。

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