我正在制作一个聊天应用程序，并尝试实现一个函数，该函数可删除onClick事件中的已单击消息，但我收到错误“index.esm2017.js：1032 Uncaught（in promise）TypeError：无法读取undefined（阅读'indexOf'）"的属性。我正在为数据库使用firebase。有人能看看我的代码有什么问题吗？谢谢。

const [messages, setMessages] = useState([]);
const adminUid = "";

    useEffect(() => {
        const colRef = collection(db, "messages");
        const colRefOrdered = query(colRef, orderBy("createdAt"));

        onSnapshot(colRefOrdered, (snapshot) => {
            setMessages(
                snapshot.docs.map((doc) => {
                    return {
                        id: doc.id,
                        message: doc.data()
                    };
                })
            )
        })
    })

    const deleteHandle = async() => {
        const docRef = doc(db, "messages", messages.id);
        await deleteDoc(docRef);
    }

    if (adminUid === auth.currentUser.uid) {
        return (
            <div className="Chatroom">
                <div className="chatsChatroom">
                    {messages.map(({ message, id }) => (
                        <div>
                            <div key={id}
                                className={`msg ${message.uid === auth.currentUser.uid ? "sent" : "received"}`}>
                                <img src={message.photoURL} className="senderProfilePicture" />
                                <div className="senderName">
                                    <p> {message.displayName} </p>
                                </div>
                                <div className="text">
                                    <p> {message.text} </p>
                                </div>
                                <div className="deleteChat">
                                    <h3 onClick={deleteHandle}> Delete </h3>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

                <SendMessage />
            </div>
        )
    }