Android 我在向Firebase数据库发送数据时遇到了一个非常神秘的问题

我正在用React native和Firebase制作一个简单的聊天应用程序。但是，我无法使用sendMessage函数将想要添加的数据发送到数据库中。我遇到这样的错误，无法找到解决方案。你能帮助我吗？我找不到addDoc（）所属的位置，也不知道SyntheticObject是什么意思。我有这样一个问题，尽管我没有完全遵守我在项目之后的教程视频中所说的话

错误图像： 错误：函数addDoc（）无效数据

import React, {useLayoutEffect, useState} from 'react'
import { TouchableOpacity } from 'react-native';
import { StyleSheet, Text, View } from 'react-native'
import {Avatar} from "react-native-elements";
import {AntDesign, FontAwesome, Ionicons} from "@expo/vector-icons";
import { SafeAreaView } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { KeyboardAvoidingView, TextInput } from 'react-native';
import { Platform } from 'react-native';
import { ScrollView } from 'react-native';
import { Keyboard } from 'react-native';
import { TouchableWithoutFeedback } from 'react-native';
import { db, auth } from '../firebase';
import * as firebase from "firebase";

const ChatScreen = ({ navigation, route }) => {
    const [input, setInput] = useState("");



    useLayoutEffect(() => {
        navigation.setOptions({
            title: "Chat",
            headerBackTitleVisible: false,
            headerTitleAlign: "left",
            headerTitle: () => (
                <View 
                style={{
                    flexDirection: "row",
                    alignItems: "center",

                }}>
                <Avatar rounded source={{uri: "https://cencup.com/wp-content/uploads/2019/07/avatar-placeholder.png",}} />
                <Text
                style={{color: "white", marginLeft: 10, fontWeight: "700"}}
                >{route.params.chatName}</Text>
                </View>
            ),
            headerLeft: () => (
                <TouchableOpacity
                style={{marginLeft: 10}}
                onPress={navigation.goBack}
                >
                    <AntDesign name="arrowleft" size={24} color="white" />
                </TouchableOpacity>
            ),
            headerRight: () => (
                <View
                style={{
                    flexDirection: "row",
                    justifyContent: "space-between",
                    width: 80,
                    marginRight: 20,
                }}>
                    <TouchableOpacity>
                        <FontAwesome name="video-camera" size={24} color="white" />
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <Ionicons name="call" size={24} color="white" />
                    </TouchableOpacity>
                </View>
            )
        });
    }, [navigation]);



    const sendMessage = () => {
        Keyboard.dismiss();

        db.collection('chats').doc(route.params.id).collection('messages').add({
            timestamp: firebase.firestore.FieldValue.serverTimestamp(),
            message: input,
            displayName: auth.currentUser.displayName,
            email: auth.currentUser.email,
            photoURL: auth.currentUser.photoURL
        })

        setInput('')

    };


    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: "white"}}>
            <StatusBar style="light" />
            <KeyboardAvoidingView
            behavior={Platform.OS === "ios" ? "padding" : "height"}
            style={styles.container}
            keyboardVerticalOffset={90}>
                <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                <>
                <ScrollView>
                </ScrollView>
                <View style={styles.footer}>
                    <TextInput 
                    placeholder="Signal Message"
                    value={input}
                    onChange={text => setInput(text)}
                    onSubmitEditing={sendMessage}
                     style={styles.textInput}/>
                     <TouchableOpacity onPress={sendMessage} activeOpacity={0.5}>
                         <Ionicons name="send" size={24} color="#2B68E6" />
                     </TouchableOpacity>

                </View>
                </>
                </TouchableWithoutFeedback>
            </KeyboardAvoidingView>
        </SafeAreaView>
    )
}

export default ChatScreen

const styles = StyleSheet.create({
    container: {
        flex:1,


    },
    footer: {
        flexDirection: "row",
        alignItems: "center",
        width: "100%",
        padding: 15,
    },
    textInput:{
        bottom: 0,
        height: 40,
        flex: 1,
        marginRight: 15,
        backgroundColor: "#ECECEC",
        padding: 10,
        color: "grey",
        borderRadius: 30,
    },
})

import React，{useLayoutEffect，useState}来自“React”
从“react native”导入{TouchableOpacity}；
从“react native”导入{样式表、文本、视图}
从“react native elements”导入{Avatar}；
从“@expo/vector icons”导入{AntDesign，FontAwesome，Ionicons}”；
从“react native”导入{SafeAreaView}；
从“博览会状态栏”导入{StatusBar}；
从“react native”导入{KeyboardAvoidingView，TextInput}；
从“react native”导入{Platform}；
从“react native”导入{ScrollView}；
从“react native”导入{Keyboard}；
从“react native”导入{TouchableWithoutFeedback}；
从“../firebase”导入{db，auth}；
从“firebase”导入*作为firebase；
const ChatScreen=（{navigation，route}）=>{
const[input，setInput]=useState（“”）；
useLayoutEffect（（）=>{
navigation.setOptions({
标题：“聊天”，
headerbacktitlevible:false，
headerTitleAlign:“左”，
标题：（）=>(

虽然您调用了参数“text”，但它实际上是一个事件对象，特别是一个“SyntheticEvent”（这些是react使用的事件对象）。因此，稍后当您尝试将其发送到数据库时，firebase基本上会说，“呃，我无法序列化它”

相反，您可能希望使用onChangeText事件：

onChangeText={text => setInput(text)}

onChangeText={text => setInput(text)}

虽然您调用了参数“text”，但它实际上是一个事件对象，特别是一个“SyntheticEvent”（这些是react使用的事件对象）。因此，稍后当您尝试将其发送到数据库时，firebase基本上会说，“呃，我无法序列化它”

相反，您可能希望使用onChangeText事件：

onChangeText={text => setInput(text)}

onChangeText={text => setInput(text)}

您的onChange函数应该是这样的

onChange={e => setInput(e.nativeEvent.text)}

您发送的是事件对象，而不是文本

您也可以使用onChangeText道具

您的onChange函数应该是这样的

onChange={e => setInput(e.nativeEvent.text)}

您发送的是事件对象，而不是文本

您也可以使用onChangeText道具