[TypeScript] useParams 값을 props내려줄 때 type오류(string,undefind)

한 페이지 파일에서 useParams를 사용해 얻은 id값을 다른 컴포넌트로 props내려주려하니 오류가 났다.

props로 보내서 다른 컴포넌트에서 그에 맞는 id값에 따라 api를 호출하고 싶었으나,, 

{ id: string | undefined; }' is not assignable to type 'string'.
{ id: string; }' 형식은 'string' 형식에 할당할 수 없습니다 .. 등의 type 오류들이 계속 발생했다.

 

useParams사용한 파일 코드

 const { id } = useParams();

  return (
    <div>
      <div>
        <h4>Gender</h4>

        <EmotionDoughnutChart id={id} />
        ...

 

props받는 파일 코드

export default function EmotionDoughnutChart(id ) {
...

 

해결

props받는 파일에서 코드를 다음과 같이 고치니 해결이 되었다. id를 {}로 감싸 객체구조분해할당을 하였고,

type을 {id?:string}으로 유니온 타입을 지정하자 string | undefined 오류도 해결되었다.

export default function EmotionDoughnutChart({ id }: { id?: string }) {