core.mjs:7400 ERROR FirebaseError: Invalid document reference. Document references must have...

I am trying to make sure that when I switch to dark mode it is saved in the user with which I logged in and when I log in again with that user it puts me in dark mode again, but I get this error and if you can help me to do that if dark mode is true in my collection when I log in dark mode is on, this is my code:

app.component.html

<ion-menu menuId="menu" contentId="main-content">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menú</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item button [routerLink]="['/perfil']">
<ion-label>Perfil <ion-icon name="person-circle"></ion-icon></ion-label>
</ion-item>
<ion-item button [routerLink]="['/pagina-principal']">
<ion-label>Pagina Principal <ion-icon name="home"></ion-icon></ion-label>
</ion-item>
<ion-item button [routerLink]="['/preguntas-frecuentes']">
<ion-label>Preguntas frecuentes <ion-icon name="help"></ion-icon></ion-label>
</ion-item>
<ion-item button [routerLink]="['/guias-cruceros']">
<ion-label>Guías de Cruceros <ion-icon name="information-circle"></ion-icon></ion-label>
</ion-item>
<ion-item button [routerLink]="['/tiempo']">
<ion-label>El Tiempo <ion-icon name="partly-sunny"></ion-icon></ion-label>
</ion-item>
<ion-item button [routerLink]="['/como-llegar']">
<ion-label>Como Llegar <ion-icon name="location"></ion-icon></ion-label>
</ion-item>
<ion-item button [routerLink]="['/reservar']">
<ion-label>Reservar <ion-icon name="calendar"></ion-icon></ion-label>
</ion-item>
<ion-item>
<ion-toggle [(ngModel)]="paletteToggle" (ionChange)="toggleChange($event)" justify="space-between">
Dark Mode
<ion-icon name="moon"></ion-icon>
</ion-toggle>

</ion-item>
<ion-item color="danger" button (click)="logout()">
<ion-label>Cerrar Sesión</ion-label>
<ion-icon name="exit"></ion-icon>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>


app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, RouterLink } from '@angular/router';
import { IonicModule} from '@ionic/angular';
import { AuthenticationService } from './authentication.service';
import { FormsModule } from '@angular/forms';
import { exit, personCircle, home, informationCircle, partlySunny, location, calendar, moon, help } from 'ionicons/icons';
import { addIcons } from 'ionicons';
import { UsuarioService } from './usuario.service';
import { GlobalService } from './global.service';

@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
standalone: true,
imports: [IonicModule, RouterLink, FormsModule],
})
export class AppComponent implements OnInit{
paletteToggle = false;
constructor(public authService:AuthenticationService, public router: Router, public usuarioService: UsuarioService, public globalService: GlobalService) {
addIcons({ exit, personCircle, home, informationCircle, partlySunny, location, calendar, moon, help });
}

async logout(){
this.authService.signOut().then(() => {
this.router.navigate(['/login'])
})
}

ngOnInit() {
const prefersDark = window.matchMedia('(prefers-color-schema: dark)');

this.initializeDarkPalette(prefersDark.matches);

prefersDark.addEventListener('change', (mediaQuery) => this.initializeDarkPalette(mediaQuery.matches));
}

initializeDarkPalette(isDark) {
this.paletteToggle = isDark;
this.toggleDarkPalette(isDark);
}

async toggleChange(ev) {
this.toggleDarkPalette(ev.detail.checked);
await this.usuarioService.updateModoOscuro(this.globalService.uid, this.usuarioService.modoOscuro)
console.log(this.usuarioService.modoOscuro)
}

toggleDarkPalette(shouldAdd){
document.documentElement.classList.toggle('ion-palette-dark', shouldAdd)
}
}


usuario.service.ts

import { inject, Injectable } from '@angular/core';
import { addDoc, collection, doc, getDocs, query, updateDoc, where } from 'firebase/firestore';
import { Firestore } from '@angular/fire/firestore'
import { GlobalService } from './global.service';

@Injectable({
providedIn: 'root',
})
export class UsuarioService {
private firestore = inject(Firestore);
public modoOscuro: boolean = false;

constructor(public globalService: GlobalService) {}

async obtenerDatosUsuario(uid: string) {
const Ref = collection(this.firestore, 'Usuario');
const q = query(Ref, where('uid', '==', uid));
const querySnapshot = await getDocs(q);

if (!querySnapshot.empty) {
const userDoc = querySnapshot.docs[0].data();
return userDoc;
}
return null;
}

async guardarDatosUsuario(nombre: string, email:string){
const obj = {
"uid" : this.globalService.uid,
"nombre" : nombre,
"email" : email,
"modoOscuro" : this.modoOscuro
};

const Ref = collection(this.firestore, 'Usuario');

await addDoc(Ref, obj);
}

async updateModoOscuro(uid: string, modoOscuro: boolean){
updateDoc(doc(this.firestore, "Usuario" + uid), {
modoOscuro: modoOscuro
})
}
}

Continue reading...