TypeError: Cannot read property 'key' of undefined

const onHandleClickLike = (e) => {
    e.preventDefault();
    setColor("#ff0000");
    if(color == "#ff0000"){
      setColor("#ffffff");
    }

    if(wishlistList.wishlistItems){
      // console.log("product: ", product);
      dispatch(AddToWishlistAction(product, quantityCount, option));
    }else{
      dispatch(DeleteAllFromWishlistAction(product));
      dispatch(AddToWishlistAction(product, quantityCount, option));
    }
    return;
  };

발생원인 : 위 코드처럼 Action에서 첫 번째 인자로 product를 넣어줬기 때문이다.
console.log로 product를 찍어봤는데, null이 떴다. null 이어서 아무값도 들어오지 않은 것이었다.

const ProductCard: React.FunctionComponent<Props> = ({ item }) => {
  const [color, setColor] = useState("#ffffff")
  const router = useRouter();
  const newProduct = item;
  const classes = useStyles();
  const productList = useSelector<RootState, ProductState>(s => s.product);
  const wishlistList = useSelector<RootState, WishlistState>(s => s.wishlist);
  const product = getProduct(productList.items, router.query.slug);

  const [option, setOption] = useState<Option[]>([
    { optionName: '', optionContents: ''},
  ]);

  const dispatch = useDispatch();
  const quantityCount = 1;

  // 좋아요 하트 버튼 클릭 이벤트
  const onHandleClickLike = (e) => {
    e.preventDefault();
    setColor("#ff0000");
    if(color == "#ff0000"){
      setColor("#ffffff");
    }

    if(wishlistList.wishlistItems){
      // console.log("product: ", item);
      dispatch(AddToWishlistAction(item, quantityCount, option));
    }else{
      dispatch(DeleteAllFromWishlistAction(item));
      dispatch(AddToWishlistAction(item, quantityCount, option));
    }
    return;
  };

해결 방법: Action의 첫 번째 인자를 item으로 바꿔서 해결하였다.
console.log로 item을 찍어봤더니 정상적으로 값이 들어가는 것을 확인할 수 있었다.

느낀점 : Debugging을 습관화하자!