类型‘JSX.IntrinsicElements’无‘mesh’属性，React Three Fiber开发求助

常见修复方案： #

1. 清理过时类型依赖并同步包版本 #

@react-three/fiber目前已自带TypeScript类型，无需单独安装废弃的@types/react-three-fiber包。如果之前安装过它，先执行卸载：

npm uninstall @types/react-three-fiber

再确保@react-three/fiber和three为最新稳定版：

npm install @react-three/fiber three --save

2. 配置TS的JSX导入源 #

在tsconfig.json的compilerOptions中添加jsxImportSource，让TypeScript识别R3F的自定义JSX元素：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@react-three/fiber"
  }
}

如果是Create React App项目，将jsx设为react-jsxdev即可，同样保留jsxImportSource配置。

3. 确保3D组件嵌套在<Canvas>内部 #

<mesh>这类R3F组件必须在<Canvas>的上下文环境中使用，TS才能识别其类型。正确的组件结构示例：

import { Canvas } from '@react-three/fiber';

export default function My3DScene() {
  return (
    <Canvas>
      <mesh>
        <boxGeometry />
        <meshBasicMaterial color="#ff0000" />
      </mesh>
    </Canvas>
  );
}

4. 手动引入全局类型声明 #

若以上方法无效，在项目src目录下新建globals.d.ts文件，添加以下内容强制引入R3F的类型：

/// <reference types="@react-three/fiber" />

内容的提问来源于stack exchange，提问作者Hao.Le