React Bricks中用ThreeJS渲染3D对象遇TS错误2371

错误原因分析 #

你的代码存在几个关键问题导致了TypeScript报错：

• React函数组件（React.FC）的参数是props对象，你直接把colorMap作为参数传入是错误的，且这里不需要通过props传递该变量——它是通过useLoader内部加载的。
• 箭头函数用()直接返回JSX时，不能在其中插入变量声明语句，必须改用{}包裹函数体，先执行逻辑再返回JSX。
• 重复声明了colorMap（参数和内部const声明重名），这既是语法错误，也不符合逻辑。

修正后的代码 #

import 'bootstrap/dist/css/bootstrap.css';
import React from "react";
import { useLoader } from "react-three-fiber";
import { TextureLoader } from "three";
import logo from "../react-bricks/bricks/images/logo.jpg"

const Box: React.FC = () => {
  // 通过useLoader加载纹理，无需将colorMap作为组件参数
  const colorMap = useLoader(TextureLoader, logo.src);
  
  return (
    <mesh rotation={[90, 0, 20]}>
      <boxBufferGeometry attach="geometry" args={[3, 3, 3]} />
      <meshStandardMaterial map={colorMap} />
    </mesh>
  )
}

export default Box;

额外说明 #

• 导入TextureLoader时直接用import { TextureLoader } from "three"即可，无需从three/src/Three导入，更简洁规范。
• 若组件无需接收props，React.FC可以直接使用，无需额外声明类型。

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