如何使用 ionic typescript 解决 firebase 未捕获错误？

Question

I have a problem with my code. I'm using the Firebase functions in an ionic project (with typescript). when I run "firebase serve", my function works and i can get the data, but when I export my function in ionic, I have this error:

Uncaught Error: Response is missing data field. at new HttpsErrorImpl (index.cjs.js:58) at Service. (index.cjs.js:553) at step (tslib.es6.js:100) at Object.next (tslib.es6.js:81) at fulfilled (tslib.es6.js:71) at ZoneDelegate.invoke (zone-evergreen.js:359) at Object.onInvoke (core.js:39699) at ZoneDelegate.invoke (zone-evergreen.js:358) at Zone.run (zone-evergreen.js:124) at zone-evergreen.js:855

this is my firebase function:

import * as functions from 'firebase-functions'
import * as admin from 'firebase-admin'

const serviceAccount = require('../permissions.json')
const cors = require('cors')({ origin: true })

    

admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
    databaseURL: 'https://{'myUrl'}.firebaseio.com'
})

export const posts = functions.https.onRequest(async (request, response) => {
    const docs = await admin.firestore().collection('posts').orderBy('date', 'desc').get()
    cors(request, response, () => {})
    response.json(
        docs.docs.map((doc) => {
            return {
                postID: doc.id,
                ...doc.data()
            }
        })
    )
})

and this my ionic code:

import { Component, OnInit } from '@angular/core';
import { AngularFireFunctions } from '@angular/fire/functions'


 export class SharedModule {}

 @Component({
   selector: 'app-feed',
   templateUrl: './feed.page.html',
   styleUrls: ['./feed.page.scss'],
  })
  export class FeedPage implements OnInit {
 
  posts
  sub
 
   constructor(private aff:AngularFireFunctions) {
 }
  
    ngOnDestroy() {
       this.sub.unsubscribe()
   }

 

    

ngOnInit() {     

   const posts = this.aff.httpsCallable('posts')
    this.sub = posts({}).subscribe(data =>{
    this.posts = data
  } )
     
   } 
}

if anyone don't know why it isn't working, please push this question to the top with the up button, maybe other person knows it's super important because i really need to fix this error quickly

thank you in advance

Answer 1

You are invoking a callable function :

const posts = this.aff.httpsCallable('posts')

But your function isn't of the callalbe type. It's an HTTP function , as you can see from onRequest in the function builder:

export const posts = functions.https.onRequest(async (request, response) => {

If you want to write a callable function, use the examples in the linked documentation. You will use onCall instead of onRequest . Note that they have very different APIs.