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

개인 프로젝트를 진행하는 중 만난 에러에 대해 기록을 남겨놓는다.

// Userstate.ts 파일

import { atom } from "recoil";

...
const userInfo = atom({
  key: 'userInfo',
  default : [{
    uid: "",
    email: "",
    displayName: ""
  }]
})
...

// Login.tsx 파일


const setUserInfo = useSetRecoilState(userInfo); // 사용자 정보

...

try{
      const auth = getAuth();
      const { user } = await signInWithEmailAndPasswordService(auth, userId, userPw);
      setUserInfo([
        {
          uid : user.uid,
          email : user.email,
          displayName : user.displayName,
        }
      ])
      ...
    } catch(error) {
    	...
    }
  }

Login.tsx에서 로그인한 유저의 email과 displayName을 저장하는데 오류가 발생했다.

 

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

 

그래서 처음엔 atom의 default 값을 변경했었다.

// UserState.ts

const userInfo = atom({
  key: 'userInfo',
  default : [{
    uid: "",
    email: "" || null,
    displayName: "" || null
  }]
})

고쳐지지 않았구요~

 

그래서 setUserInfo 부분을 수정했다.

// Login.tsx

setUserInfo([
    {
      uid : user.uid,
      email : user.email !== null ? user.email : "",
      displayName : user.displayName !== null ? user.displayName : "",
    }
  ])

 

이렇게 고치니 typescript 관련 에러가 사라졌다. 일단은 로그인에 관련된 내용을 구현 중이라 어디서 사이드 이펙트가 터질지는 모르지만 일단 고친거에 의의를 둠................