TypeScript类型不兼容错误：属性reminderButtonText类型匹配问题求助

问题根源 #

你组件Props中写的string | ''是无效的类型声明——空字符串''本身就是string类型的子类型，TypeScript会自动将string | ''简化为string。这意味着你的组件实际上要求reminderInfo的两个属性必须是确定的string类型，但你定义的状态类型是string | undefined，允许属性值为undefined，两者类型范围不匹配，因此触发了TypeScript的类型检查报错。

两种修正方案 #

方案一：对齐组件Props与状态类型

如果组件可以接受属性值为undefined，直接把Props里的类型改成string | undefined，和状态类型保持一致：

type Props = {
  reminderInfo: {
    reminderButtonText: string | undefined;
    reminderUrl: string | undefined;
  };
};

方案二：调整状态类型以匹配组件要求

如果组件不允许属性值为undefined，那就修改状态的类型，确保属性只能是string类型（你的初始值是空字符串，已经符合string类型要求）：

const [reminderInfo, setReminderInfo] = useState<{
  reminderButtonText: string;
  reminderUrl: string;
}>({
  reminderButtonText: '',
  reminderUrl: '',
});

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