ERROR FirebaseError: Invalid collection reference.: Collection references must have an odd number of segments, but Notes/id has 2

Good morning everyone, I just started learning Angular programming 3-4 months ago. And right now I’m practicing CRUD using Firestore database. I have this error while I’m trying to delete on my program: ‘core.mjs:10592 ERROR FirebaseError: Invalid collection reference. Collection references must have an odd number of segments, but Notes/r5GucE9DETw36sJKCMgi has 2.’ I tried several ways, but still the same error.

Here’s my HTML:

<div class="col-md-4" *ngFor="let note of notesData">
            <div class="card card-body">
                <h5 class="card-title">{{ note.title }}</h5>
                <p class="text-muted">{{ note.description }}</p>
                    <div class="d-flex align-items-center">
                        <span class="mx-2">
                            <i class="bi bi-pencil-square" data-bs-toggle="modal" 
                            data-bs-target="#editNotesModal"></i>
                        </span>
                        <span class="mx-2">
                        <i class="bi bi-trash" (click)="deleteNote(note)"></i>
                    </span>
                    </div>

My TS file:

  noteForm!: FormGroup;
  notesData: any;
  noteObj: Note = {
    id: '',
    title: '',
    description: ''
  }

  constructor(private fb: FormBuilder, private noteService: NoteService){
    this.noteForm = this.fb.group({
      title: ['', Validators.required],
      description: ['', Validators.required]
    })
  }

  ngOnInit(){
    this.fetchAllNotes()
  }

  addNote(){
    const { value } = this.noteForm
    console.log(value);

    this.noteObj.id = '',
    this.noteObj.title = value.title,
    this.noteObj.description = value.description

    this.noteService.addNote(this.noteObj).then((note)=>{
      if(note){
        alert("Note Added Successfully")
      }
    })
    this.noteForm.reset()
  }

  fetchAllNotes(){
    this.noteService.getNotes().subscribe((res: Note[])=>{
      console.log(res)
      this.notesData = res;
    })
  }

  deleteNote(note: Note){
    let delConfirm = confirm('Delete current selected Note?');
    if (delConfirm == true){
      this.noteService.deleteNote(note);
    }
  }
}

**My service: **

  addNote (note: Note){
    note.id = doc(collection(this.fs, 'id')).id
    return addDoc(collection(this.fs, 'Notes'), note)
  }

  getNotes():Observable<Note[]>{
    let notesRef = collection(this.fs, 'Notes')
    return collectionData(notesRef, {idField: 'id'}) as Observable<Note[]>
  }

  deleteNote(note: Note){
    let docRef = doc(collection(this.fs,`Notes/${note.id}`));
    return deleteDoc(docRef)
  }

  updateNote(note: Note, notes: any){
    let docRef = doc(this.fs, `Notes/${note.id}`);
    return updateDoc(docRef, notes)
  }

and my firebase databaseFirestore database

I tried this https://firebase.google.com/docs/firestore/manage-data/delete-data#collections but more error occurs, would love to know what did I do wrong.

>Solution :

In the following code

   deleteNote(note: Note){
     let docRef = doc(collection(this.fs,`Notes/${note.id}`));
     return deleteDoc(docRef)
   }

the way you define the docRef is not correct: collection(this.fs,`Notes/${note.id}`) generates the error because with Notes/${note.id} you pass 2 segments to the collection method when it expects an odd number. The Notes/r5GucE9DETw36sJKCMgi path is a Document path, not a Collection path.

In addition, you try to pass only a CollectionReference to the doc() method.

The following should do the trick:

  deleteNote(note: Note){
    let docRef = doc(this.fs,'Notes', note.id);
    return deleteDoc(docRef)
  }