React TS通用数据源Hook的onPut/onPost类型错误求助

问题根源 #

从错误信息来看，你定义的通用Hook返回的onPutUser/onPostUser是联合类型（包含boolean、UserListT[]、两个不同签名的函数），但UserList组件的onPut/onPost props要求的是单一的(data: UserT) => void类型。这说明你的通用Hook在返回值类型定义上出现了混淆——把状态数据（比如列表、加载状态）和操作函数的类型错误地合并成了联合类型，导致TypeScript无法确定传递的是合法的函数。

具体解决步骤 #

1. 修正通用Hook的返回类型定义

确保通用Hook的返回值结构清晰，将状态数据和操作函数明确区分，避免类型混同。示例修正后的Hook类型与实现：

// 定义通用Hook的返回类型，拆分状态与操作函数
type UseDataHookReturn<DataListT, DataT> = {
  // 状态数据字段
  dataList: DataListT[];
  loading: boolean;
  // 操作函数，明确为异步函数类型
  onPost: (data: DataT) => Promise<void>;
  onPut: (data: DataT) => Promise<void>;
  onDelete: (id: string | number) => Promise<void>;
};

// 通用Hook实现
function useData<DataListT, DataT>(): UseDataHookReturn<DataListT, DataT> {
  const [dataList, setDataList] = useState<DataListT[]>([]);
  const [loading, setLoading] = useState(false);

  const onPost = async (data: DataT) => {
    setLoading(true);
    // 替换为实际API调用逻辑
    await fetch('/api/post', { method: 'POST', body: JSON.stringify(data) });
    setLoading(false);
  };

  const onPut = async (data: DataT) => {
    setLoading(true);
    await fetch('/api/put', { method: 'PUT', body: JSON.stringify(data) });
    setLoading(false);
  };

  const onDelete = async (id: string | number) => {
    setLoading(true);
    await fetch(`/api/delete/${id}`, { method: 'DELETE' });
    setLoading(false);
  };

  return { dataList, loading, onPost, onPut, onDelete };
}

2. 对齐UserList组件的Props类型

调整UserList的props类型，兼容异步函数的返回值（React允许事件处理函数返回Promise）：

type UserListProps = {
  users: UserListT[];
  // 允许函数返回void或Promise<void>，匹配Hook返回的异步函数类型
  onPut: (data: UserT) => void | Promise<void>;
  onPost: (data: UserT) => void | Promise<void>;
  canEdit: boolean;
};

const UserList: React.FC<UserListProps> = ({ users, onPut, onPost, canEdit }) => {
  // 组件渲染逻辑
  return (
    <div>
      {users.map(user => (
        <div key={user.id}>
          <span>{user.name}</span>
          {canEdit && <button onClick={() => onPut(user)}>编辑</button>}
        </div>
      ))}
      <button onClick={() => onPost({} as UserT)}>新增用户</button>
    </div>
  );
};

3. 正确传递Props

在容器组件中解构Hook返回的操作函数，直接传递给UserList，此时TypeScript会自动推断正确类型：

const UserContainer: React.FC = () => {
  const { dataList: users, loading, onPost: onPostUser, onPut: onPutUser } = useData<UserListT, UserT>();

  return (
    <div>
      {loading && <div>加载中...</div>}
      <UserList 
        users={users} 
        onPut={onPutUser} 
        onPost={onPostUser} 
        canEdit={true} 
      />
    </div>
  );
};

额外排查点 #

• 如果之前Hook使用数组形式返回（类似useState），改成对象返回结构，避免字段类型自动合并为联合类型。
• 检查Hook内部是否误将状态值（如loading、dataList）赋值给onPut/onPost变量，这会导致变量类型混入非函数类型。

内容的提问来源于stack exchange，提问作者Mohammad Momtaz