[Typescript] img 태그의 src 속성의 타입

img html 태그의 src 속성에서 다음과 같은 에러가 발생했다.

<ProfilePicture src={pfp} alt="프로필 사진" />

No overload matches this call.
Overload 1 of 2, '(props: PolymorphicComponentProps<"web", FastOmit<DetailedHTMLProps<ImgHTMLAttributes, HTMLImageElement>, never>, void, void, {}, {}>): Element', gave the following error.
Type 'string | null' is not assignable to type 'string | undefined'.
Type 'null' is not assignable to type 'string | undefined'.

위 에러 메시지에서 주요 내용은 Type 'null' is not assignable to type 'string | undefined'. 이다. 이는 img 태그의 src 속성에 null 이 오는 경우 이미지를 가져올 수 없기 때문이다. src 속성에 부여되는 pfp 변수의 타입을 다음과 같이 선언하였다.

MDN: img 태그 src 속성이 이미지를 가져올 수 없을 때

// 사용자 개인정보에 관한 타입
export interface IPersonalInfo {
  pfp: string | null;
  username: string;
  // ...
}

에러 내용에서도 친절히 알려주듯 pfp의 타입을 string | undefined 로 수정한다.

// 사용자 개인정보에 관한 타입
export interface IPersonalInfo {
  pfp: string | undefined;
  username: string;
  // ...
}