使用ref绑定drei库自定义ShaderMaterial时出现TypeScript类型错误怎么办？

核心问题：你定义的PolygonMat是JSX组件的props类型，但shaderMaterial组件的ref绑定的是Three.js的ShaderMaterial实例，两者类型不匹配导致报错。以下是具体修复步骤：

1. 扩展ShaderMaterial类型以包含自定义uniform #

给Three.js的ShaderMaterial添加自定义uniform字段，确保通过ref访问时能获得正确的类型提示：

import { ShaderMaterial } from 'three'

declare module 'three' {
  interface ShaderMaterial {
    uniforms: {
      uTime: { value: number }
      // 其他自定义uniform可在此添加
    }
  }
}

2. 修正JSX组件的类型声明 #

全局JSX类型只需定义组件的props，无需混入ref的类型：

type PolygonMatProps = {
  uTime: number
} & JSX.IntrinsicElements['shaderMaterial']

declare global {
  namespace JSX {
    interface IntrinsicElements {
      polygonMaterial: PolygonMatProps
    }
  }
}

3. 正确定义ref的类型 #

组件中ref的类型应为RefObject<ShaderMaterial>，而非之前的PolygonMat：

import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'
import { ShaderMaterial } from 'three'

function YourComponent() {
  const materialRef = useRef<ShaderMaterial>(null)

  useFrame((state) => {
    if (materialRef.current) {
      materialRef.current.uniforms.uTime.value = state.clock.getElapsedTime()
    }
  })

  return (
    <mesh>
      <polygonMaterial
        ref={materialRef}
        uTime={0}
        vertexShader={`/* 你的顶点着色器代码 */`}
        fragmentShader={`/* 你的片元着色器代码 */`}
      />
    </mesh>
  )
}

报错原因说明 #

你之前误将JSX组件的props类型PolygonMat当作ref的类型，但shaderMaterial组件的ref实际指向Three.js底层的ShaderMaterial实例，并非组件props对象，因此类型不兼容。通过扩展Three.js的ShaderMaterial类型，既能保留自定义uniform的类型提示，又能让ref类型匹配。

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