React TypeScript使用UUID遇id类型错误：string不可赋值给number

错误原因很明确：uuidv4()生成的是字符串类型的ID，但你的addUser action或用户数据类型中，id被定义为number类型，导致TypeScript类型校验失败。

下面是两种可行的解决办法：

方法1：修改类型定义（推荐） #

将用户数据或addUser payload中的id类型从number改为string，适配UUID的类型：

// 示例：修改用户接口定义
interface User {
  id: string; // 替换原来的number类型
  name: string;
  email: string;
}

// 或者修改addUser action的payload类型
interface AddUserActionPayload {
  id: string;
  name: string;
  email: string;
}

这种方式最合理，因为UUID本身就是设计为字符串格式的唯一标识，能避免数字ID可能出现的冲突问题。

方法2：改用数字类型的ID生成方式 #

如果业务要求id必须是number类型，可以替换UUID为数字生成方案：

// 方案A：使用时间戳
dispatch(addUser({
  id: Date.now(), // 生成毫秒级时间戳（数字类型）
  name: values.name,
  email: values.email
}));

// 方案B：维护自增计数器（适合前端临时场景）
let userIdCounter = 0;

const handleAddUser = () => {
  setValues({ name: '', email: '' });
  dispatch(addUser({
    id: ++userIdCounter,
    name: values.name,
    email: values.email
  }));
  navigate('/');
};

内容的提问来源于stack exchange，提问作者Anuj Gupta 24