TypeScript 오류 <Argument of type 'LocationQueryValue | LocationQueryValue[]' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'.>

❗ 문제발생

현재 페이지에서 다음 페이지로 넘어 갈때 현재 페이지의 데이터들을 넘겨주려고 하는 상황에서 발생한 문제였다.

현재 페이지에서는 다음과 같은 코드로 다음페이지에 데이터를 넘겨주고 있다.

router.push({
    path: '/greetings',
    query: { formData: JSON.stringify(formData.value) },
  });

다음 페이지에서는 다음과 같이 데이터를 받고 있었다.

const formData = JSON.parse(route.query.formData);

그랬더니 다음과 같은 에러가 발생했다.

🧐 원인

해당 오류는 TypeScript에서 타입 불일치로 인한 것으로 보인다. Vue Router의 쿼리 매개변수는 'LocationQueryValue | LocationQueryValue[]' 형태를 가진다. 이것은 쿼리 매개변수가 단일 값 또는 값의 배열일 수 있다는 것을 의미한다. 하지만 'JSON.stringify()'메서드는 문자열 또는 null 값을 반환할 수 있다.
따라서 TypeScript가 문자열 또는 null을 기대하지만 null이 들어올 가능성이 있으므로 오류가 발생한 것이다.

📒 해결방법

쿼리 매개변수 값이 null 인지 확인하고, 만약 null 이라면 적절한 대체값을 반환하거나 오류를 처리할 수 있다. 따라서 다음과 같이 코드 수정을 했다.

let formDataString = route.query.formData as string | null;
let formData = formDataString ? JSON.parse(formDataString) : null;