ts报错|| Warning: Failed prop type:xxx but its value is `undefined`

场景

分析

可选链(?.)

可选链操作符允许你安全地访问对象的嵌套属性，即使其中间的一个属性可能不存在也不会抛出错误。如果globalAlertDetail是一个对象并且它有isShow属性，那么globalAlertDetail?.isShow会返回该属性的值。如果globalAlertDetail不存在或isShow属性不存在，表达式会返回undefined而不是抛出一个类型错误。

非空断言(!)

非空断言操作符用于告诉TypeScript编译器你确信某个表达式的值不是null或undefined。这通常用于强制类型检查忽略可能的null或undefined值。然而，在运行时，如果你对一个实际为undefined或null的值使用非空断言，那么可能会引发运行时错误，因为JavaScript引擎会尝试访问不存在的属性。

结合使用

当你写 globalAlertDetail?.isShow! 时，你是在告诉TypeScript（或其他支持此语法的环境）：“尝试获取globalAlertDetail的isShow属性，但如果globalAlertDetail是undefined或null，不要抛出错误。然而，我保证如果globalAlertDetail存在，那么它一定有isShow属性。”

这意味着如果globalAlertDetail是undefined或null，globalAlertDetail?.isShow会返回undefined，但!会导致之后的代码试图使用isShow的值，这可能会引发运行时错误，例如Cannot read properties of undefined (reading ‘isShow’)。
或者标题类似错误

解决方案

1.使用这样的表达式需要确保globalAlertDetail确实存在并有isShow属性，否则你需要有处理undefined的逻辑，例如使用逻辑与操作符(&&)：

const isShow = globalAlertDetail && globalAlertDetail.isShow;

2.使用可选链和逻辑或操作符(||)提供一个默认值：

const isShow = globalAlertDetail?.isShow || false;