React TypeScript自定义Hook泛型类型错误排查求助

错误的核心在于泛型 T 被约束为 InitialTypes（即 "john" | 55），但你在 setValue 中硬编码将 data 设置为 ["john"]。TypeScript 无法保证 T 一定是 "john"——因为 T 可以是 55 这个子类型，此时 "john"[] 显然无法赋值给 T[]（也就是 55[]），因此抛出类型不兼容的错误。

我们需要确保更新的 data 始终与泛型 T 的类型匹配，同时保留“传入不同类型返回对应数组”的需求。可以通过以下两种方式解决：

方案1：给泛型设置默认值 + 安全的默认数据 #

给泛型 T 设置默认值为 "john"，确保当用户不传 testData 时，T 自动推断为 "john"，此时 ["john"] 是完全匹配的类型。同时，当用户传入 testData 时，使用传入的数据作为 data 的来源：

import { useState, useEffect } from "react";

type IProps<T> = {
  isValid: boolean;
  testData?: T[];
};
interface IState<T> {
  error: boolean;
  loading: boolean;
  data: T[];
}
type InitialTypes = "john" | 55;

export function useSome<T extends InitialTypes = "john">({
  testData,
  isValid,
}: IProps<T>) {
  const [value, setValue] = useState<IState<T>>({
    error: false,
    loading: false,
    data: testData ?? [], // 初始值用传入的testData或空数组
  });

  useEffect(() => {
    // 根据testData或默认值生成匹配T类型的data
    const targetData = testData ?? (["john"] as T[]);
    setValue((prevState) => ({ ...prevState, data: targetData }));
  }, [testData]);

  return [value.data];
}

说明： #

• 泛型默认值 T extends InitialTypes = "john" 确保无 testData 时，T 为 "john"，["john"] as T[] 是安全的类型断言。
• 依赖数组加入 testData，保证当传入的 testData 变化时，状态能同步更新。

方案2：基于testData自动推断类型，避免硬编码默认值 #

如果不希望硬编码 "john" 作为默认值，而是让默认数据的类型完全由 T 决定，可以调整初始状态和更新逻辑，确保 data 始终是 T[] 类型：

import { useState, useEffect } from "react";

type IProps<T> = {
  isValid: boolean;
  testData?: T[];
};
interface IState<T> {
  error: boolean;
  loading: boolean;
  data: T[];
}
type InitialTypes = "john" | 55;

export function useSome<T extends InitialTypes>({
  testData = [] as T[],
  isValid,
}: IProps<T>) {
  const [value, setValue] = useState<IState<T>>({
    error: false,
    loading: false,
    data: testData,
  });

  useEffect(() => {
    // 这里可以替换为真实逻辑，比如根据isValid获取对应类型的数据
    const fetchedData: T[] = testData; // 示例：直接使用传入的testData，真实场景可替换为异步请求结果
    setValue((prevState) => ({ ...prevState, data: fetchedData }));
  }, [testData, isValid]);

  return [value.data];
}

说明： #

• 给 testData 设置默认值 [] as T[]，确保即使不传参数，T 也能被正确推断（或用户显式指定）。
• 所有更新 data 的逻辑都使用 T[] 类型的变量，彻底避免类型不兼容问题。

• 不传 testData 时，T 默认是 "john"，返回类型为 "john"[]：

  const [data] = useSome({ isValid: true }); // data类型："john"[]
  

• 传入 testData: [55] 时，T 推断为 55，返回类型为 55[]：

  const [data] = useSome({ isValid: true, testData: [55] }); // data类型：55[]
  

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