TypeScript useState回调返回undefined类型赋值报错排查

这个类型报错是状态更新回调的返回值类型不匹配导致的：
你传入setCartItems的更新函数没有在所有逻辑分支返回符合要求的数组值：

• 购物车已存在当前商品的分支，你通过return返回了数量+1后的新数组，类型为CartItemsType[]，符合类型要求
• 购物车不存在当前商品的分支，你只写了构造新数组的表达式，没有加return关键字，这个分支会默认返回undefined
• TypeScript 推导整个更新函数的返回值为CartItemsType[] | undefined，和SetStateAction<CartItemsType[]>要求的必须返回CartItemsType[]类型的规则冲突，因此抛出错误。

只需要在商品不存在的分支补上return关键字即可，另外useState的初始值不需要额外加类型断言，泛型参数已经可以约束空数组的类型，修正后的完整代码如下：

export type CartItemsType ={
  title: string
  id: number
  description: string
  images: string
  price: number
  amount: number
}

const [cartItems, setCartItems] = useState<CartItemsType[]>([])

const handleAddToCart = (clickedItem: CartItemsType) => {
  setCartItems(prev => {
    // 校验商品是否已在购物车中
    const isItemInCart = prev.find(item => item.id === clickedItem.id)
    if (isItemInCart) {
      return prev.map(item => 
        item.id === clickedItem.id ? {...item, amount: item.amount + 1} : item
      )
    }
    // 补全return，返回新增商品后的购物车数组
    return [...prev, {...clickedItem, amount: 1}]
  })
}

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