React中如何消除useState泛型setState内的false类型？

问题场景 #

在React中使用useState结合泛型管理数组状态，通过map+filter(Boolean)处理接口返回数据时，明明已经过滤掉false值，但TypeScript仍报错提示类型不匹配：

Argument of type '(false | { [x: string]: string | number; })[]' is not assignable to parameter of type 'SetStateAction<{ [k: string]: string | number; }[]>'.

原代码 #

const [mapItemsState, setMapItems] = useState<{ [k: string]: number | string }[]>([]);

setMapItems(
    Object.entries(data)?.map(
       ([key, value]) =>
              Object.keys(mapItemListKor).includes(key) && {
              [key]: value as string | number,
       },
    )
    .filter(Boolean)        // 已过滤false，但TypeScript仍识别到false类型
)

原因分析 #

TypeScript默认无法识别filter(Boolean)会完全移除数组中的false值，它只会把数组类型缩小为(false | T)[]，而非纯T[]，因此和useState定义的泛型数组类型不匹配。

解决方法 #

方法1：使用类型断言强制指定过滤后的类型 #

直接给filter结果添加类型断言，明确告知TypeScript过滤后是纯目标类型数组：

setMapItems(
    (Object.entries(data)?.map(
       ([key, value]) =>
              Object.keys(mapItemListKor).includes(key) && {
              [key]: value as string | number,
       },
    )?.filter(Boolean) as { [k: string]: number | string }[]) || []
)

注意处理Object.entries(data)可能为undefined的情况，通过|| []避免传入undefined。

方法2：使用自定义类型守卫的filter函数 #

编写类型守卫函数，让TypeScript明确知道过滤后会排除假值：

function isTruthy<T>(value: T | false | null | undefined | '' | 0): value is T {
  return Boolean(value);
}

// 调用时替换filter(Boolean)为filter(isTruthy)
setMapItems(
    Object.entries(data)?.map(
       ([key, value]) =>
              Object.keys(mapItemListKor).includes(key) && {
              [key]: value as string | number,
       },
    )
    .filter(isTruthy) || []
)

这种方式比类型断言更安全，类型守卫会在编译期做严格检查。

方法3：改用reduce直接生成目标数组 #

跳过map+filter的组合，用reduce直接遍历收集符合条件的元素，从根源避免产生包含false的数组：

setMapItems(
    Object.entries(data)?.reduce((acc, [key, value]) => {
        if (Object.keys(mapItemListKor).includes(key)) {
            acc.push({ [key]: value as string | number });
        }
        return acc;
    }, [] as { [k: string]: number | string }[]) || []
)

这种写法更高效，无需额外处理类型缩小问题，逻辑也更清晰。

内容的提问来源于stack exchange，提问作者김일혁