Can't refresh the page after deleting something from firebase

I'm deleting a row from an admin panel with a button that deletes the collection contained in that row. I want to autorefresh the page once the collection has been deleted so that i can see the changes (the row that shouldn't be there anymore). But i can't managa to do it because it breaks my remove function and only refresh the page without making any changes.

db.collection("barberForm").where("id", "==", String(customer.id))
        .get()
        .then(function(querySnapshot) {
          querySnapshot.forEach(function(doc) {
            doc.ref.delete();    
          })
        }).then(window.location.reload())    
      

        .catch(function(error) {
          console.log("Error getting documents: ", error);
        });    })
    .catch((error) => console.log('error', error));

};

delete() returns a promise, so you will need to wait for all those promises to resolve before reloading the page. You should also have to make a full callback function for the next promise in the chain for reloading the page:

        .then(function(querySnapshot) {
          const promises = [];
          querySnapshot.forEach(function(doc) {
            promises.push(doc.ref.delete());
          })
          return Promise.all(promises);
        })
        .then(() => {
          window.location.reload()
        })