How to fix Typescript error "Object is possibly 'undefined'"

Question

I'm building a cloud function that will use the Stripe API to process payments. This is within a firebase project. When I run firebase deploy I get the error "Object is possible 'undefined'" const existingSource = customer.sources.data.filter( (s) => s.id === source).pop(); I'm not sure how to resolve this.

Here is my xxx.ts where getorCreateCustomer exists

/** Read the stripe customer ID from firestore, or create a new one if missing */
export const getOrCreateCustomer = async(uid: string) => {
    const user = await getUser(uid); 
    const customerId = user && user.stripeCustomerId; 

    //if missing customerId, create it
    if (!customerId) {
        return createCustomer(uid); 
    }
    else {
        return stripe.customers.retrieve(customerId); 
    }
}

Solution 1

7 months later, I figured out the best solution.

I simply wrapped the the contents of the firebase callable function in the following if/else statement. It's a bit redundant but it works.

if (!context.auth) {
    // Throwing an HttpsError so that the client gets the error details.
    throw new functions.https.HttpsError('failed-precondition', 'The function must be called ' +
        'while authenticated.');
  }
  else{ ...copy function code here }

If you don't care about the authentication piece you can simply define the type of context as any.

(data, context:any)

Solution 2

Based on the definitions and contents of your functions, TypeScript is unable to infer the return type of getOrCreateCustomer. It is making the assumption that it could return undefined, and its strict mode is calling you out on the fact that you could be referencing a property on an undefined object, which would result in an error at runtime.

What you need to do is declare the return type to be something that can't possibly be undefined, and make sure the code in the body of the function is correct on that guarantee (otherwise you'll get a new error).

If you can't do that (but you really should do that), you might want to instead disable strict mode in your tsconfig.json file, since that is what's enforcing this level of correctness in your code.

I suggest the first option, even if you have to write more lines of code, as it's a better use of TypeScript's typing system.

Solution 3

What @Doug mentioned, but also you could write your logic to make sure that every part of customer.sources.data is not undefined...

ie:

const { sources } = customer

if (sources) {
  const { data } = sources 
  if (data) {
     // then filter / etc etc ...
  }
}

Comments

[Doug Stevenson]

Please edit the question to show getOrCreateCustomer, since that's the thing that's returning the possibly undefined object.

[Marcus Gallegos]

@DougStevenson Sorry about that, I edited and added the file. Hope you can help.