'string | undefined' 형식은 'Url' 형식에 할당할 수 없습니다. 'undefined' 형식은 'Url' 형식에 할당할 수 없습니다.ts(2322)

에러 상황 : href에 undefined가 들어오면 안된다고 에러가 났다.

import { useRouter } from 'next/router';
import Link from 'next/link';
import usePages from '../../services/pages';
import styles from './index.module.scss';

const SideMenuApp: React.FC = () => {
  const router = useRouter();
  const pages = usePages();

  const currentPage = pages.find(page => page.path === router.pathname);
  console.log(currentPage?.children);

  return (
    <div className={styles.sidemenuwrap}>
      <div className={styles.icon}>
        <img src="/images/homesvg.svg" alt="home" />
        <p>홈</p>
      </div>
      <div className={styles.submenus}>
        {submenus?.map(submenu => (
          <Link key={submenu.id} href={submenu.path} className={styles.sidemenutext}>
            {submenu.name}
          </Link>
        ))}
      </div>
    </div>
  );
};

export default SideMenuApp;

1. 일단 붙이지도 않은 ?.이 떴다. 

일단 ?. 의 의미 : ?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.

예시)

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

참고 : https://ko.javascript.info/optional-chaining

 

2. 해결방법 : data를 정의할 때 path를 undefined로 정의해두어서 난 것이다 

그래서 데이터 타입 중 path가 undefined가 될 수 없도록 변경했다. 

 

interface Item {
  id: string;
  name: string;
  path: string;
  children?: Item[] | undefined;
}