如何解决TypeScript中"Property does not exist on type never"错误

这个错误的核心原因是TypeScript无法推断出cropperRef的正确类型，初始化为null时默认被推断为never类型，导致访问cropper属性时类型不匹配。以下是具体的解决步骤：

1. 为useRef指定正确的泛型类型 #

以常用的react-cropper组件为例，先导入对应的类型：

import Cropper, { Cropper as CropperInstance } from 'react-cropper';

然后修改useRef的定义，明确它可能指向Cropper实例或者null：

const cropperRef = useRef<CropperInstance | null>(null);

如果使用的是其他Cropper组件，只需替换CropperInstance为组件对应的实例类型即可。

2. 添加空值检查避免运行时错误 #

即使指定了类型，cropperRef.current仍可能为null，所以在访问cropper属性和调用方法前要做空值判断，或者使用可选链：

修改handleClick函数 #

const handleClick = () => {
  const cropper = cropperRef.current?.cropper;
  if (!cropper) return; // 空值检查，避免后续调用报错
  const img = cropper.getCroppedCanvas().toDataURL();
  getCroppedFile(img);
};

修改rotate函数 #

const rotate = () => {
  const cropper = cropperRef.current?.cropper;
  cropper?.rotate(90); // 使用可选链，cropper为undefined时自动跳过调用
};

修改flip函数 #

// 给type参数指定明确类型，避免any
const flip = (type: 'h' | 'v') => {
  const cropper = cropperRef.current?.cropper;
  if (!cropper) return;
  
  if (type === "h") {
    const newScale = scaleX === 1 ? -1 : 1;
    cropper.scaleX(newScale);
    setScaleX(newScale);
  } else {
    const newScale = scaleY === 1 ? -1 : 1;
    cropper.scaleY(newScale);
    setScaleY(newScale);
  }
};

3. 优化Props类型（可选但推荐） #

不要用any定义props类型，换成明确的类型提升代码健壮性：

type CropperDemoProps = {
  src: string;
  getCroppedFile: (croppedDataUrl: string) => void;
  handleClose: () => void;
};

export default function CropperDemo({ src, getCroppedFile, handleClose }: CropperDemoProps) {
  // ... 剩余代码
}

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