how to delete a document from firebase in firestore by using react?

Question

this is my first react project by using firebase, everything is correct which all upload function works very well, also all images can be shown, but i use firebase.firestore.collection('image').document(doc.id).delete() when i want to delete one of the images, it shows an error which is:

Uncaught TypeError: db.document is not a function

I do not know what is going on, can someone help to resolve it, please?

projectFirestore = firebase.firestore() in the firebase config file.

import React from 'react';
import useFirestore from '../hooks/useFirestore';
import { motion } from 'framer-motion';
import { projectFirestore } from '../firebase/config';
const ImageGrid = ({ setSelectedImg }) => {
  const { docs } = useFirestore('images');
  const db = projectFirestore.collection('image');
  return (
    <div className="img-grid">
      {docs &&
        docs.map(doc => (
          <motion.div
            className="img-wrap"
            key={doc.id}
            layout
            whileHover={{ opacity: 1 }}
            onClick={() => setSelectedImg(doc.url)}
          >
            <motion.img
              src={doc.url}
              alt="uploaded pic"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 1 }}
            />
            <button className='showBt' onClick={() => db.document(doc.id).delete()}>-</button>
          </motion.div>
        ))}
    </div>
  );
};
export default ImageGrid;

Answer 1

The method you're looking for is doc(), not document().