[未處理的 promise 拒絕：FirebaseError：Function addDoc() 使用無效數據調用。 不受支持的字段值：自定義 Class object

Question

我想在 firebase firestore 數據庫中發布數據，但我不明白為什么這不起作用我可以在數據庫中發布預寫標題，但不能使用來自輸入的自定義標題

追溯： [Unhandled promise rejection: FirebaseError: Function addDoc() called with invalid data. Unsupported field value: a custom Class object (found in field date in document events/T58NdobxrvVchtaQjYx0)] [Unhandled promise rejection: FirebaseError: Function addDoc() called with invalid data. Unsupported field value: a custom Class object (found in field date in document events/T58NdobxrvVchtaQjYx0)]

我的 addEvent function 將事件日期和標題添加到 firebase 事件集合

firebase.js

export async function addEvent(date, title) {
  const eventsRef = collection(db, EVENTS_COLLECTION);
  const newEventRef = await addDoc(eventsRef, {
    date,
    title,
  })
    .then(() => {
      // Data saved successfully!
      console.log("data submitted");
    })
    .catch((error) => {
      // The write failed...
      console.log(error);
    });
  const newEvent = await getDoc(newEventRef);
  return newEvent;
}

我的日歷要在 firebase 上添加數據。

我有一個按鈕可以打開選擇器日期時間模態和下一個模態，並帶有輸入以使用提交和取消按鈕添加數據。

CalendarScreen.js

import React, { useState } from "react";
import { View, Button, StyleSheet, Modal, TextInput } from "react-native";
import { addEvent } from "../../firebase/firebase";
import CalendarPicker from "react-native-calendar-picker";
import DateTimePickerModal from "react-native-modal-datetime-picker";

export default function CalendarScreen({ selectedDate, onDateChange }) {
  
  const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
  const [isTitleModalVisible, setIsTitleModalVisible] = useState(false);
  const [eventTitle, setEventTitle] = useState("");

  const showDatePicker = () => {
    setIsDatePickerVisible(true);
  };

  const hideDatePicker = () => {
    setIsDatePickerVisible(false);
  };

  const showTitleModal = () => {
    setIsTitleModalVisible(true);
  };

  const hideTitleModal = () => {
    setIsTitleModalVisible(false);
  };

  const handleAddEvent = (eventDate, eventTitle) => {
    hideDatePicker(eventDate, eventTitle);
    showTitleModal();
  };

  const handleSubmitTitle = (eventDate, eventTitle) => {
    addEvent(eventDate, eventTitle);
    hideTitleModal();
    setEventTitle("");
  };

  return (
    <View>
      <CalendarPicker
        style={styles.calendar}
        selectedDate={selectedDate}
        onDateChange={onDateChange}
      />
      <Button title="Add Event" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="datetime"
        onConfirm={handleAddEvent}
        onCancel={hideDatePicker}
      />
      <Modal style={styles.modal} visible={isTitleModalVisible}>
        <View>
          <TextInput
            placeholder="Event Title"
            value={eventTitle}
            onChangeText={setEventTitle}
            style={styles.input}
          />
          <Button title="Submit" onPress={handleSubmitTitle} />
          <Button title="Cancel" onPress={hideTitleModal} />
        </View>
      </Modal>
    </View>
  );
}

編輯輸入字符串時

export async function getEvents() {
  const eventsRef = collection(db, EVENTS_COLLECTION);
  const docSnap = await getDocs(eventsRef);
  const events = [];
  docSnap.forEach((doc) => {
    events.push({ id: doc.id, ...doc.data() });
  });
  return events;
}

CalendarScreen.js

export default function CalendarScreen({ selectedDate, onDateChange }) {
  const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);

  const showDatePicker = () => {
    setIsDatePickerVisible(true);
  };

  const hideDatePicker = () => {
    setIsDatePickerVisible(false);
  };

  const handleAddEvent = (eventDate) => {
    addEvent(eventDate);
    hideDatePicker();
  };

  return (
    <View>
      <CalendarPicker selectedDate={selectedDate} onDateChange={onDateChange} />
      <Button title="Add Event" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="datetime"
        onConfirm={handleAddEvent}
        onCancel={hideDatePicker}
      />
    </View>
  );

臨時解決方案：看到你的數據庫，即使有錯誤

CalendarScreen.js

import React, { useState } from "react";
import { View, Button, StyleSheet, Modal, TextInput } from "react-native";
import { addEvent } from "../../firebase/firebase";
import CalendarPicker from "react-native-calendar-picker";
import DateTimePickerModal from "react-native-modal-datetime-picker";
import moment from "moment-timezone";

moment.tz.setDefault("Europe/Paris");

export default function CalendarScreen({ selectedDate, onDateChange }) {
  const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [eventTitle, setEventTitle] = useState("");

  const showDatePicker = () => {
    setIsDatePickerVisible(true);
  };

  const hideDatePicker = () => {
    setIsDatePickerVisible(false);
  };

  const showModal = () => {
    setIsModalVisible(true);
  };

  const hideModal = () => {
    setIsModalVisible(false);
  };

  const handleAddEvent = (eventDate) => {
    addEvent(eventDate, eventTitle);
    showModal();
  };

  const handleSubmit = (eventDate) => {
    addEvent(eventDate, eventTitle);
    hideModal();
    hideDatePicker();
  };

  return (
    <View>
      <CalendarPicker selectedDate={selectedDate} onDateChange={onDateChange} />
      <Button title="Add Event" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="datetime"
        onConfirm={handleAddEvent}
        onCancel={hideDatePicker}
      />
      <Modal animationType="slide" transparent={false} visible={isModalVisible}>
        <View>
          <TextInput
            placeholder="Event Title"
            value={eventTitle}
            onChangeText={setEventTitle}
          />
          <Button
            title="Submit"
            onPress={(eventDate) => handleSubmit(eventDate)}
          />
          <Button title="Cancel" onPress={hideModal} />
        </View>
      </Modal>
    </View>
  );

增刪改查

export async function addEvent(date, title) {
  const eventsRef = collection(db, EVENTS_COLLECTION);
  const newEventRef = await addDoc(eventsRef, {
    date: date,
    title: title,
  })
    .then(() => {
      // Data saved successfully!
      console.log("data submitted");
    })
    .catch((error) => {
      // The write failed...
      console.log(error);
    });

  const newEvent = await getDoc(newEventRef);
  return newEvent;
}

Answer 1

該錯誤表明您嘗試使用字段date的字段值不受支持來編寫文檔。

您將在此處找到 Firestore 支持的數據類型列表。 您需要將日期選擇器返回的 Object 轉換為具有 Firestore 支持的類型的 Object。