声明自定义类型后仍无法导入react-three-fiber自定义元素

错误原因 #

你尝试从@react-three/fiber导入customElement是错误的——customElement并不是库导出的内置成员。通过extend方法注册自定义类后，react-three-fiber会自动在JSX环境中生成对应的可使用标签，不需要手动导入。

修复步骤 #

1. 移除错误的导入语句
   删除import { customElement } from '@react-three/fiber'这行代码，完全不需要导入这个组件。

2. 修正JSX标签名
   你在类型扩展里定义的是customElement，所以JSX中应该使用<customElement />标签，而不是示例里的<customComponent />（标签名必须和ThreeElements接口里的键名完全一致）。

3. 确保类型扩展被TypeScript识别
   如果把类型扩展代码放在单独的.d.ts文件中，要保证该文件被包含在tsconfig.json的include范围内；如果是放在组件文件里，需确保文件是.tsx或.ts格式，让TypeScript能正确解析。

修正后的完整代码示例 #

import { useRef, useEffect } from 'react'
import { GridHelper } from 'three'
import { extend, Object3DNode } from '@react-three/fiber'

// 创建自定义类
class CustomElement extends GridHelper {}

// 注册到react-three-fiber协调器
extend({ CustomElement })

// 扩展TypeScript类型
declare module '@react-three/fiber' {
  interface ThreeElements {
    customElement: Object3DNode<CustomElement, typeof CustomElement>
  }
}

// 直接在JSX中使用，无需导入
export default function MathVisualization() {
  return (
    <canvas>
      <customElement args={[10, 10]} />
    </canvas>
  )
}

额外说明 #

• extend方法的作用是让react-three-fiber的 reconciler 知晓你的自定义Three.js类，从而可以像使用内置的<mesh>、<gridHelper>一样使用自定义标签。
• 类型扩展是为了让TypeScript能识别这个自定义JSX标签的类型，提供正确的属性提示和类型检查。

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