三个反应纤维 OrbitControls ref 对象在构建阶段在打字稿中抛出错误（代码确实有效）

Question

我目前陷入了有关 ref 对象类型的打字稿错误（据我所知）。我对打字稿很陌生，所以我不明白如何解决这个问题！

我已附加了给我的 Tootip 打字稿，以及它在构建阶段引发的错误。此外，我使用react- Three-drei和react- Three-Fiber库来合成 Three.js 对象

这是抛出的错误：

src/components/models/web/Plane.tsx:120:22 - error TS2322: Type 'MutableRefObject<OrbitControlsProps | undefined>' is not assignable to type 'Ref<OrbitControls> | undefined'.
  Type 'MutableRefObject<OrbitControlsProps | undefined>' is not assignable to type 'RefObject<OrbitControls>'.
    Types of property 'current' are incompatible.
      Type 'OrbitControlsProps | undefined' is not assignable to type 'OrbitControls | null'.
        Type 'undefined' is not assignable to type 'OrbitControls | null'.

120       <OrbitControls ref={cameraRef} />
                         ~~~

  node_modules/@types/react/index.d.ts:134:9
    134         ref?: Ref<T> | undefined;
                ~~~
    The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & OrbitControlsProps & RefAttributes<OrbitControls>'

这是我的代码：

import {
  MeshDistortMaterial,
  MeshWobbleMaterial,
  OrbitControls,
  OrbitControlsProps,
  PerspectiveCamera,
  PointMaterial,
  Text,
} from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import React, { useContext, useRef } from "react";
import { ThemeContext } from "../../theme/theme";
export default function Box() {
  const cameraRef = useRef<OrbitControlsProps>();
  useFrame(() => {
    var angle = window.scrollY / window.innerHeight;
    cameraRef.current?.setPolarAngle(1.1 + angle / 10);
  });
  console.log(cameraRef);
  const theme = useContext(ThemeContext);
  return (
    <>
      <PerspectiveCamera
        makeDefault ...
      [truncated]
      />

      <OrbitControls ref={cameraRef} />
      <mesh position={[0, 0, 0]} rotation={[-1.5, 0, 0]}>
        <planeBufferGeometry args={[25, 10, 50, 50]} />
        <meshLambertMaterial
          attach="material"
          wireframe
          distort={0}
          color={theme.secondary}
        />
      </mesh>

      <fog
        attach="fog"
        color={theme.primary}
        near={1}
        far={3.5}
        position={[0, 0, 0]}
      />
      <mesh position={[0, 0, 0]}>
        <pointLight color={theme.cta} intensity={4} position={[0, 1, 0]} />
      </mesh>
    </>
  );
}

这是我从智能感知中获得的工具提示：

Answer 1

根据https://github.com/pmndrs/drei/issues/730，解决方案是：

import type { OrbitControls as OrbitControlsImpl } from 'three-stdlib'

const ref = useRef<OrbitControlsImpl>(null)

<OrbitControls ref={ref} />

这个对我有用。