When I try to show my reservations it shows me [object Object]

I am trying to show my cruise reservations but when I try to show it it dont work and shows me [object Object] and sometimes it dont even show anything like if I didnt login, I dont know how to fix it, here is my code:

perfil.page.html

<div class="ion-page" id="main-content">
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Perfil</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="perfil">
<ion-avatar>
<img src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
</ion-avatar>
</div>
<div class="align-center">
<ion-title>{{userName}}</ion-title>
</div>
<p></p>
<ion-item class="titulo" color="primary">
<ion-title>Cruceros Reservados</ion-title>
</ion-item>
<ion-list>
<ion-item *ngFor="let crucero of crucerosReservados">
<ion-label>{{crucero.nombreCrucero}}</ion-label>
</ion-item>
</ion-list>
<ion-item class="titulo" color="primary">
<ion-title>Cruceros Visitados</ion-title>
</ion-item>
<ion-item class="titulo" color="danger" button (click)="logout()">
<ion-title>Cerrar Sesión</ion-title>
</ion-item>
</ion-content>
</div>


perfil.page.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { Router, RouterLink } from '@angular/router';
import { AuthenticationService } from '../authentication.service';
import { MenuController } from '@ionic/angular';
import { GlobalService } from '../global.service';
import { ReservasService } from '../reservas.service';
import { UsuarioService } from '../usuario.service';

@Component({
selector: 'app-perfil',
templateUrl: './perfil.page.html',
styleUrls: ['./perfil.page.scss'],
standalone: true,
imports: [CommonModule, FormsModule, IonicModule, RouterLink]
})
export class PerfilPage {
user: any
crucerosReservados: any[] = [];
userName: string = '';

constructor(public authService:AuthenticationService, public router: Router, public menu: MenuController, public globalService: GlobalService, private reservasService: ReservasService, private usuarioService: UsuarioService) {
this.menuActive();
this.loadUserProfile();
}

menuActive(){
this.menu.enable(true, 'menu');
}

async loadUserProfile() {
const user = this.authService.getCurrentUser();
if (user) {
this.user = user;
this.globalService.uid = user.uid;
await this.loadUserName();
await this.loadCrucerosReservados();
} else {
this.router.navigate(['/login']);
}
}

async loadUserName() {
const userData = await this.usuarioService.obtenerDatosUsuario(this.globalService.uid);
this.userName = userData['nombre'];
console.log(this.userName)
}

async loadCrucerosReservados() {
if (this.globalService.uid) {
this.crucerosReservados = await this.reservasService.obtenerReservasPorUid(this.globalService.uid);
console.log(this.crucerosReservados);
console.log(this.globalService.uid);
}
}

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


authentication.service.ts

import { inject, Injectable } from '@angular/core';
import { Auth } from '@angular/fire/auth';
import { createUserWithEmailAndPassword, sendPasswordResetEmail, signInWithEmailAndPassword, signOut, User } from 'firebase/auth';
import { GlobalService } from './global.service';
@Injectable({
providedIn: 'root',
})
export class AuthenticationService {
private auth = inject(Auth);
constructor( public globalService: GlobalService ) { }

async registerUser(email: string, password:string){
return await createUserWithEmailAndPassword(this.auth, email, password)
}

async loginUser(email: string, password: string){
return await signInWithEmailAndPassword(this.auth, email, password)
}

async resetPassword(email: string){
return await sendPasswordResetEmail(this.auth, email)
}

getCurrentUser() {
const user = this.auth.currentUser;
return user;
}

async signOut(){
return await signOut(this.auth)
}

}


global.service.ts

import { Injectable } from "@angular/core";

@Injectable({
providedIn: 'root',
})
export class GlobalService {
public uid: string = '';
public usuario: {};

async inicializarGlobales() {
this.uid = '';
this.usuario = {};
}

constructor() {}
}


reservas.service.ts

import { inject, Injectable } from "@angular/core";
import { addDoc, collection, query, Firestore, getDocs, where } from "@angular/fire/firestore";

@Injectable({
providedIn: 'root',
})
export class ReservasService {
private firestore = inject(Firestore);
constructor( ) { }

async guardarReserva(uid: any, fechaInicio: any, lugares: any, puertoSalida: any, noches: any, huespedes: any, nombreCamarote: any, numeroCamarotes: any, nombreCrucero: any) {
const obj ={
"uid" : uid,
"fechaInicio" : fechaInicio,
"lugares" : lugares,
"puertoSalida" : puertoSalida,
"noches" : noches,
"huespedes" : huespedes,
"nombreCamarote" : nombreCamarote,
"numeroCamarotes" : numeroCamarotes,
"nombreCrucero" : nombreCrucero
};

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

await addDoc(Ref, obj);
}

async obtenerReservasPorUid(uid: string) {
const Ref = collection(this.firestore, 'Reservas');
const q = query(Ref, where('uid', '==', uid));
const querySnapshot = await getDocs(q);
const reservas = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
console.log(reservas)
return reservas;
}
}


usuario.service.ts

import { inject, Injectable } from '@angular/core';
import { addDoc, collection, getDocs, query, 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);

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,
};

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

await addDoc(Ref, obj);
}
}

Continue reading...