I have recently developed an Ionic Firebase chat application. I seem to be encountering an issue with setting up a query snapshot when initializing the message page. Here is the code snippet that I am using:
ngOnInit() {
this.messageService.getAllMessages()
.doc(`${this.userId[0] + '-' + this.userId[1]}`)
.collection('message')
.orderBy('createdAt', 'asc')
.onSnapshot((doc) => {
this.messages = [];
doc.forEach((snap) => {
this.messages.push({
content: snap.data().content,
createdAt: snap.data().createdAt,
userId: snap.data().userId
});
});
console.log('messages', this.messages);
});
}The issue arises when there are no messages initially and I try sending a message. The page does not load on the first attempt to navigate to it.
This problem seems to stem from Firebase not returning any data, but unfortunately, I am unable to add a .catch in the query to handle the error gracefully and allow users to still access the message page.
ERROR Error: Uncaught (in promise): Error: No value accessor for form control with unspecified name attribute
Error: No value accessor for form control with unspecified name attribute
at _throwError (vendor.js:70776)
...
[error details continue]
...
POST https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channeMy main question is, is there a way to handle null return values in the .Snapshot query within Firebase?
I attempted the following approach:
ngOnInit() {
try {
this.messageService.getAllMessages()
.doc(`${this.users[0] + '-' + this.users[1]}`)
.collection('message')
.orderBy('createdAt', 'asc')
.onSnapshot((doc) => {
this.messages = [];
doc.forEach((snap) => {
this.messages.push({
content: snap.data().content,
createdAt: snap.data().createdAt,
userId: snap.data().userId
});
});
console.log('messages', this.messages);
});
} catch (error) {
console.log('Message page error', error);
}
}