[Firestore + React]Uncaught (in promise) TypeError: n.indexOf is not a function

📢 이 버그 좀 보세요!

필자는 firestore에 문서를 삽입(setDoc)하는 과정에서 위와 같은 에러를 접하게 되었다.

 

🐞 버그가 나타난 이유?

구글링을 했을 때는 async, promise 관련 에러로 보였으나, 에러가 난 아래의 소스를 확인해 본 결과 말 그대로 type error였다. 
setDoc을 할 때 document의 id는 무조건 String형 데이터를 입력해야하나, Number형 데이터가 들어가고 있었던 것이다.

        const getProfile = async () => {
            try {

                
                const database = getFirestore(firebase); // firestore 접근
                // Kakao SDK API를 이용해 사용자 정보 획득
                let data = await window.Kakao.API.request({
                    url: "/v2/user/me",
                });
                    //
                const q = query(collection(database, 'users'), where('user_id', '==', data.id));
                getDocs(q).then(async userChk =>{ // user_id가 DB에 등록됐는 지 체크, 없으면 추가한다.
                    if(userChk.size === 0)
                    { 
                        await setDoc(doc(database, "users", data.id), {
                                 user_id: data.id,
                                 user_name: data.properties.nickname,
                        });
                    }
                })

                // list 이동
                
                history(`/memolist/${data.id}`, {state : {nickName: data.properties.nickname}});

            }

 

🕸 어떻게 이 버그를 잡을까?

해결 방법은 간단하다. setDoc에 id값으로 부여할 data.id를 아래와 같이 String형으로 형변환 해주면 된다.

await setDoc(doc(database, "users", String(data.id)), {
                                 user_id: data.id,
                                 user_name: data.properties.nickname,
                        });