에러

addDoc을 실행해도 데이터 추가 X
Function addDoc() called with invalid data. Unsupported field value: a custom ha object (found in document courses/x7ZQDEqTAFvJbBhE7qFS)

원인

데이터 중 하나인 bounds가 firebase에서 지원하지 않는 필드 형식이기 때문

해결

ignoreUndefinedProperties: true(실패)

📌 참조

• Unhandled Rejection (FirebaseError): ...
• How to enable ignoreUndefinedProperties in node js

firebase.ts

import { getFirestore, initializeFirestore } from "firebase/firestore";

(중략)

export const app = initializeApp(firebaseConfig);
export const dbService = getFirestore(app);

initializeFirestore(app, {
  ignoreUndefinedProperties: true,
});

위 코드를 적용하자 Uncaught FirebaseError: initializeFirestore() has already been called with different options. To avoid this error, call initializeFirestore() with the same options as when it was originally called, or call getFirestore() to return the already initialized instance. 라는 에러메시지와 함께 빈 화면 반환

프로토타입 변경하기(실패)

저번 프로젝트 때 지도 범위 유지 기능을 구현하면서 프로토타입 이슈를 겪었던 게 떠올랐다. [[Prototype]]: Y가 카카오맵에서 커스텀한 프로토타입이기 때문에 파이어베이스에서 지원하지 않을 거라고 추측하고 거기서부터 접근하기 시작했다.

1. 여행지 추가시 bounds 프로토타입을 object로 변경
2. 상세페이지 조회시 bounds 프로토타입을 카카오맵 커스텀 프로토타입으로 변경

여러 로직을 시도해봤지만 큰 틀은 위와 같다. 이걸 변형해서 추가 직전에 bounds 프로토타입 변경하기, 실시간 렌더링용 bounds와 firebase 추가용 bounds 구별하기, 리듀서에서 firebase 추가용 bounds 프로토타입 변경하기 등등 여러 시도를 해봤지만 결과는 모두 실패 OTL

PostMap.tsx

  useEffect(() => {
    if (map !== undefined) {
      // @ts-ignore
      map.panTo(boundsInfo);
    }
  }, [filteredId]);

모두 map.panTo(boundsInfo)에서 a.e is not a function.이라는 공통적인 에러 메시지와 함께 빈 화면을 반환했다.

JSON.stringify()(성공)

    const newPost = {
      title: courseTitle,
      travelStatus,
      location: category,
      hashtags: selectedValues,
      courseList: JSON.stringify(courseList),
      coverImg,
      userID,
      nickname: authService.currentUser?.displayName,
      createdAt: Date.now(),
      likes: 0,
      likesID: [],
    };

bounds의 타입이 ha라는 커스텀 타입이기 때문에 계속해서 에러가 발생했던 것이었다. 그래서 bounds가 속해있는 courseList를 JSON.stringify를 사용해 문자열로 변경해서 저장했다.

반대로 불러올 땐 JSON.parse를 사용하면 된다. 그러나 JSON.stringify는 프로토타입까지는 복사하지 않기 때문에 불러올 때는 setPrototypeOf를 사용해야 할 듯 싶다.