Deleting a document on onClick event is not working-CodePudding

I am making a chat application and trying to implement a function that deletes a clicked message on onClick event, but I am getting an error "index.esm2017.js:1032 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'indexOf')". I am using firebase for the database. Could anyone look into what is wrong with my code? Thank you.

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>
        )
    }

CodePudding user response：

The reason you are getting this error is because the value of messages.id is probably undefined, this is because you are trying to access key id for an entire array of messages. What you need is just the id of the message that you wish to delete.
When you map the messages array to show each message, your message object must have a key id. You need to pass that value to your deleteHandle method:

<div className="deleteChat">
    <h3 onClick={() => deleteHandle(message.id)}> Delete </h3>
</div>

After this you need to accept the message.id value in your function's arguments:

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

This will only pass the id of the message you wish to delete, I hope this helps. Please accept this as the answer if it does! Thanks