I am currently experiencing a problem with deleting documents in Firebase Firestore using React, Typescript, and Redux. Despite the code running, the document continues to exist in

I seem to be encountering an issue that I can't quite figure out. Despite my code running smoothly, I am unable to delete a document from Firestore. The document ID definitely exists within the database, and there are no subcollections attached to it (which I know can sometimes complicate deletions).

Below is the code snippet:

Delete Function

export const deletePost = (
  docId: string,
  community: string
): AppThunk => async (
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  dispatch
): Promise<void> => {
  console.log(
    await firebase.firestore().collection(community).doc(docId).get()
  );

  firebase
    .firestore()
    .collection(community)
    .doc(docId)
    .delete()
    .then(() => {
      console.log("Document successfully deleted!");
      dispatch(
        alertSuccess("post deleted, reverting to community page", "success")
      );
      dispatch(retrievePostsByCommunity(community));
    })
    .catch((error) => {
      console.error("Error removing document: ", error);
    });
  dispatch({ type: DELETE_POST });
};

Firebase Rules (simple setup)

 rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write, update, delete: if
          request.time < timestamp.date(2029, 12, 21);
    }
  }
} 

If needed, here is an image of the collection: https://i.stack.imgur.com/UfRhm.png

Thank you!

Answer №1

Minor error in the parameters of the function... but I was able to resolve it successfully.

Appreciate your assistance!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The specified 'IArguments' type does not qualify as an array type

Currently working on crafting a personalized logger. It's a fairly straightforward process, but I'm running into some errors that are muddying up my output. Here's what I have so far: @Injectable() export class Logger { log(...args: any ...

increase the selected date in an Angular datepicker by 10 days

I have a datepicker value in the following format: `Fri Mar 01 2021 00:00:00 GMT+0530 (India Standard Time)` My goal is to add 60 days to this date. After performing the addition, the updated value appears as: `Fri Apr 29 2021 00:00:00 GMT+0530 (India St ...

AngularJS Currency Converter - Converting Currencies with Ease

I have a question regarding the most efficient way to handle currency conversion on a webpage. Currently, I have multiple input fields displaying different currencies. When a user clicks on the currency conversion button, a modal popup appears. After the ...

What could be causing the error in Angular 2 when using multiple conditions with ng-if?

My aim is to validate if the length of events is 0 and the length of the term is greater than 2 using the code below: <li class="more-result" *ngIf="events?.length == 0 && term.value.length > 2"> <span class="tab-content- ...

Exploring the archives of PubNub within Angular5

I've been working on integrating PubNub history into my web app, but I'm currently only able to view it in the console. Here's what I have so far: pubnub.history( { channel: 'jChannel', reverse: false, ...

Unable to update state in the Nextjs -useState even with the help of useEffect

My goal is to create a dark mode toggle that cycles through 3 states { 0:auto, 1:light, 2:dark } in a loop. I also want to save this value in localStorage so it can be fetched on page reload. However, I'm facing an issue where the themeIndex doesn&apo ...

Guide on implementing lazy loading with data-grid material-ui

I encountered an error when trying to import the data-grid using lazy loading. const DataGrid = lazy(async () => await import('@material-ui/data-grid')) I have successfully imported other material-ui components without any issues, but for so ...

Can React Native support styling using server-side data?

One of my React Native (RN) components is rendering data from an external server. The data is enclosed within RN components. For example: ... <View> <Text>{this.props.db.greeting}</Text> </View> The 'DB' object is si ...

Encountering an error with the Next Auth adapter in TypeScript when attempting to modify the default User interface

This is my first time using TypeScript and I am attempting to customize the default User interface for next-auth. I have experimented with the following code: next-auth.d.ts import { User } from "next-auth" import { JWT } from "next-auth/j ...

Experimenting with the routerLink directive in Angular 2

Currently, I am in the process of testing routing functionality. As part of this, I have moved my navbar to a separate component called MdNavbar, which primarily consists of HTML and CSS. The RouteConfig is located in another component where MdNavbar is in ...

React Context failing to update when clicking on modal opening button

Currently, I am facing an issue where I am attempting to trigger a modal by updating the state of the component within a Context Provider. Despite the button registering a click successfully, the Modal fails to open. Below is the code snippet containing ...

Deleting the stylesheet exclusively within the confines of the React application window

Here is an image that will help illustrate the issue: https://i.stack.imgur.com/VA7fw.png If you want to check out the code sandbox for this problem, you can visit: https://codesandbox.io/s/annoying-stylesheet-2gpejc?file=/public/index.html I am current ...

Webpack has no issues building the files, however, the JavaScript fails to execute during runtime

I recently upgraded from Webpack v4 to v5, following the documentation and addressing any deprecation messages from the CLI. The build was successful, but when testing the application, I noticed that the JavaScript wasn't running and no errors were be ...

The 'required' validator in Mongoose seems to be malfunctioning

I've been attempting to validate the request body against a Mongoose model that has 'required' validators, but I haven't been successful in achieving the desired outcome so far. My setup involves using Next.js API routes connected to Mo ...

The TextField component in Material UI keeps its value visible even when typing in the field, unlike other components where the value is hidden

Since diving into Material UI, I've encountered an odd issue with the hintText in a TextField Component from Material UI. Below is my code snippet: /* in my component ... */ /* ... */ render() { const actions = [ <FlatButton ...

What is the best way to instantiate a dynamic object within a literal?

I am dealing with an object that contains multiple fields, mainly consisting of constant string values. However, I also need to incorporate a variable that is determined by the current state. const {order} = this.state; myObject={{ fieldA: 2, fiel ...

Italian calendar conversion for the react-multi-date-picker library

I recently integrated the react-multi-date-picker into my project, utilizing the multiple mode feature. However, I encountered an issue when trying to display the Italian calendar based on the language setting. Despite using locale="it", the calendar was n ...

Javascript/Webpack/React: encountering issues with refs in a particular library

I've encountered a peculiar issue that I've narrowed down to the simplest possible scenario. To provide concrete evidence, I have put together a reproducible repository which you can access here: https://github.com/bmeg/webpack-react-test Here&a ...

What is the benefit of establishing contexts as opposed to simply exporting objects?

As I was pondering how to avoid deep nesting of props, it struck me: "why not export objects instead of using React context?" For instance, rather than writing: const handleClick = event => { event.preventDefault(); doSomething(); }; const calcPri ...

What Type of state does Typescript expect in React?

Whenever I attempt to pass the state in my TypeScript-based React application using any to a function, I encounter a tslint error. no-any: The use of 'any' for type declaration compromises type safety. It is recommended to replace it with a mo ...