Object is possibly 'undefined' Reactjs

typeValue.find(x => x.value === snapshot.data().type)

You're trying to find an element in typeValue that satisfies x.value === snapshot.data().type, but snapshot.data().type could be anything so TypeScript is warning that typeValue.find(x => x.value === snapshot.data().type) may return undefined.

If you want to tell TypeScript that x.value === snapshot.data().type will definitely match one of the elements, you can use !:

rank: typeValue.find(x => x.value === snapshot.data().type)!.rank

You can also use ? if rank can be undefined:

rank: typeValue.find(x => x.value === snapshot.data().type)?.rank

find will return undefined if it can't find a match, and then it is illegal to call .rank. To solve, use ?.rank instead:

rank: typeValue.find(x => x.value === snapshot.data().type)?.rank

If the problem persists, then you may have to do the same for .type:

rank: typeValue.find(x => x.value === snapshot.data()?.type)?.rank

Declare types for you typeValue array variable :-

const typeValue: { name: string; value: string; rank: number }[] = [
  { name: "Subscription", value: "subscription", rank: 2 },
  { name: "Single", value: "single", rank: 3 },
  { name: "Trial", value: "trial", rank: 0 },
  { name: "Unlimited", value: "unlimited", rank: 1000 },
  { name: "Promo", value: "promo", rank: 1 },
  { name: "Test", value: "test", rank: 0 },
  { name: "Brand", value: "brand", rank: 3 },
];

Also add types for snapshot.data().type, if you didn't declared it already!