TypeScript报错：Property 'setSelectedFile'不存在于void类型.ts(2339)求助

核心原因 #

错误 Property 'setSelectedFile' does not exist on type 'void'.ts(2339) 意味着你调用 useSelectFile() 后得到的结果是 void（无返回值），但你试图访问它的 setSelectedFile 属性，因此触发类型错误。

常见问题点及修复方案 #

1. 自定义hook useSelectFile 未正确返回对象 #

检查 useSelectFile.tsx 代码，确保它返回包含 setSelectedFile 的对象。

错误示例：

// useSelectFile.tsx
export const useSelectFile = () => {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0] || null;
    setSelectedFile(file);
  };
  // 未返回任何内容，默认返回void
};

修复后：

// useSelectFile.tsx
import { useState } from 'react';

export const useSelectFile = () => {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0] || null;
    setSelectedFile(file);
  };

  // 返回包含状态和方法的对象
  return {
    selectedFile,
    setSelectedFile,
    handleFileChange
  };
};

2. 调用hook时的解构/访问错误 #

检查 NewPostForm.tsx 中调用 useSelectFile 的方式，确保正确获取 setSelectedFile。

错误示例：

// NewPostForm.tsx
import { useSelectFile } from './useSelectFile';

const NewPostForm = () => {
  // 错误：直接调用hook但未解构，或错误访问返回值
  useSelectFile().setSelectedFile(null);
};

修复后：

// NewPostForm.tsx
import { useSelectFile } from './useSelectFile';

const NewPostForm = () => {
  // 正确解构需要的属性
  const { setSelectedFile, handleFileChange } = useSelectFile();

  // 使用示例
  const resetFile = () => {
    setSelectedFile(null);
  };

  return (
    <form>
      <input type="file" onChange={handleFileChange} />
      <button type="button" onClick={resetFile}>重置文件</button>
    </form>
  );
};

3. 强行指定hook返回值为void类型 #

如果用变量接收hook返回值，不要手动指定为void类型，让TypeScript自动推断。

错误示例：

// NewPostForm.tsx
const fileHook: void = useSelectFile(); // 错误：强行指定为void
fileHook.setSelectedFile(null);

修复后：

// NewPostForm.tsx
const fileHook = useSelectFile(); // 自动推断正确类型
fileHook.setSelectedFile(null);

验证步骤 #

1. 确认 useSelectFile 正确返回包含 setSelectedFile 的对象
2. 在 NewPostForm 中正确解构或访问hook的返回值
3. 重新编译代码，检查错误是否消失

内容的提问来源于stack exchange，提问作者Pranav Verma