Firebase Firestore添加自定义标题事件失败问题求助

向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)]

问题根源 #

1. 日期类型不兼容：DateTimePicker返回的是第三方自定义日期对象，Firestore仅支持原生JS类型（如标准Date对象、字符串、数字等），直接传入自定义类对象会触发类型错误。
2. 参数传递丢失：原组件逻辑中，跨模态框传递eventDate时出现参数丢失，导致addEvent函数接收的日期值不符合预期。

最终解决方案 #

1. Firebase 工具函数优化（firebase.js）

export async function addEvent(event) {
  try {
    const eventsRef = collection(db, EVENTS_COLLECTION);
    const docRef = await addDoc(eventsRef, event);
    console.log("事件已添加，ID:", docRef.id);
  } catch (error) {
    console.error("添加事件失败:", error);
  }
}

2. 组件逻辑修正（CalendarScreen.js）

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

export default function CalendarScreen({ selectedDate, onDateChange }) {
  const [isDateTimePickerVisible, setDateTimePickerVisible] = useState(false);
  const [event, setEvent] = useState({ name: "" });
  const [date, setDate] = useState("");

  const showDateTimePicker = () => {
    setDateTimePickerVisible(true);
  };

  // 将选择的日期转换为Firestore支持的格式
  const handleDatePicked = (selectedDate) => {
    // 推荐方案：转为标准JS Date对象（支持Firestore日期查询）
    // const firestoreDate = new Date(selectedDate);
    // setDate(firestoreDate);

    // 备选方案：转为格式化字符串（仅用于展示场景）
    const formattedDate = selectedDate.toLocaleDateString();
    const formattedTime = selectedDate.toLocaleTimeString();
    setDate(`${formattedDate} ${formattedTime}`);
    setDateTimePickerVisible(false);
  };

  // 提交事件到Firestore
  const handleSubmit = async () => {
    try {
      await addEvent({ ...event, date });
      // 提交后重置表单
      setEvent({ name: "" });
      setDate("");
    } catch (error) {
      console.error("提交失败:", error);
    }
  };

  return (
    <View>
      <TextInput
        onChangeText={(text) => setEvent({ ...event, name: text })}
        placeholder="事件名称"
        value={event.name}
      />
      <Text>已选日期: {date || "未选择"}</Text>

      <Button title="选择日期时间" onPress={showDateTimePicker} />

      <DateTimePickerModal
        mode="datetime"
        isVisible={isDateTimePickerVisible}
        onConfirm={handleDatePicked}
        onCancel={() => setDateTimePickerVisible(false)}
      />
      <Button title="提交事件" onPress={handleSubmit} />
    </View>
  );
}

核心修正点 #

• 日期类型转换：将第三方组件返回的日期对象转为Firestore兼容的标准类型
• 状态管理优化：用组件状态统一存储日期和标题，避免跨模态框的参数传递丢失问题
• 错误处理完善：用try/catch捕获异步错误，避免未处理的Promise拒绝
• 逻辑简化：合并冗余模态框逻辑，让数据流更清晰

内容的提问来源于stack exchange，提问作者Fractalys_sync