为何已做空值检查仍出现React的Object is possible null or undefined错误？

为什么条件检查不起作用？ #

你两次调用了inHolidays()函数，这两次调用是完全独立的执行过程：

• 第一次调用inHolidays()做条件判断时，它返回了真值，但TypeScript无法保证第二次调用时返回的结果和第一次完全一致——毕竟React组件可能在两次调用之间发生重渲染，data状态也可能随之更新，导致第二次调用返回null/undefined。
• 另外，从静态分析的角度，TypeScript没法跨多次函数调用跟踪返回值的状态，所以即便你做了前置判断，它依然会认为第二次调用的结果可能为空。

解决方法 #

把inHolidays()的调用结果存到一个变量里，复用这个变量即可：

{
  const inHolidays = useCallback(() => data?.user.holiday_times ? checkIfEmployeeIsInHolidays(data?.user.holiday_times) : null, [data]);
  
  // 只调用一次，把结果存起来
  const holidayInfo = inHolidays();
  
  return holidayInfo 
    ? <p>Mitarbeiter ist im Urlaub bis zum {format(new Date(holidayInfo.end_time), 'PP', { locale: de })}</p>
    : <p>NOT</p>
}

这样只执行一次inHolidays()，TypeScript能明确holidayInfo在条件分支里是有效的非空值，就不会再抛出「Object is possible null or undefined」的错误了。

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