如何解决React TypeScript报错：类型""不可分配给SetStateAction<undefined>参数

问题根因 #

你的regulatoryListActiveId状态同时存储了两种不同类型的值：

• 选中状态时存入的key是数组map遍历生成的数字类型索引
• 取消选中状态时存入的是空字符串""
  之前未声明useState泛型时TS无法明确状态类型触发TS2345，你强制指定泛型为string后，字符串类型和数字类型的变量直接做全等比较自然触发类型不重叠的TS2367报错。

最优解决方案 #

统一状态类型为数字+空标记的组合，避免多类型混用：

1. 修改状态声明，指定泛型为number | null，初始值设为null：

const [regulatoryListActiveId, setregulatoryListActiveId] = useState<number | null>(null);

2. 将原代码中赋值空字符串的逻辑，改为赋值null：

if (regulatoryListActiveId === key) {
  setregulatoryListActiveId(null);
} else {
  setregulatoryListActiveId(key);
}

修改后状态仅会出现数字和null两种类型，和key的数字类型匹配，两处报错都会消失。

兼容解决方案（不推荐） #

如果你必须保留空字符串作为空值标记，可以在存入和比较时统一转为字符串类型：

1. 状态声明保持string泛型，初始值设为空字符串：

const [regulatoryListActiveId, setregulatoryListActiveId] = useState<string>("");

2. 赋值和比较时统一将数字key转为字符串：

className={`${regulatoryListActiveId !== String(key) ? "collapsed" : ""} ${item.noOfSelected > 0 ? "selected" : ""}`}
onClick={(): void => {
  if (regulatoryListActiveId === String(key)) {
    setregulatoryListActiveId("");
  } else {
    setregulatoryListActiveId(String(key));
  }
}}

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