React中Object is possibly 'undefined'错误解决求助：数组find取值场景

嘿，我太懂你碰到这个报错的烦躁了——毕竟你用typeValue.find()找匹配对象的时候，TypeScript可不敢保证每次都能找到结果，一旦找不到返回undefined，你直接去掏.rank可不就触发警告了嘛！结合你的代码，咱们来搞几个靠谱的解决办法：

方案1：用可选链+空合并运算符（最稳妥的通用方案） #

直接在访问rank前加个可选链?.，再用??给个默认值，这样就算找不到匹配对象，也不会报错，还能给个合理的兜底值：

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

• ?.的作用：如果find()返回undefined，就会直接停止后续访问，返回undefined，不会抛出错误
• ??的作用：如果前面的值是undefined或者null，就用后面的默认值（这里我设了0，你可以根据业务需求修改）

方案2：先判断对象是否存在再访问 #

先把find()的结果存起来，用条件判断确认它存在后再取rank，TypeScript就不会再瞎担心了：

const matchedItem = typeValue.find(x => x.value === snapshot.data().type);
const rank = matchedItem ? matchedItem.rank : 0; // 找不到就用默认值0

要是你百分百确定snapshot.data().type一定在typeValue的value列表里，也可以用非空断言!（但记住哈，这个操作有点“赌”的成分，要是真的出现找不到的情况，运行时会报错）：

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

方案3：用类型约束让TypeScript放心 #

你可以先定义一个包含所有合法value的联合类型，然后把snapshot.data().type断言成这个类型，这样TypeScript就知道find()肯定能找到匹配项：

// 先定义合法的类型值
type ValidTypeValue = "subscription" | "single" | "trial" | "unlimited" | "promo" | "test" | "brand";

// 把接口返回的type断言成合法类型
const currentType = snapshot.data().type as ValidTypeValue;

// 现在TypeScript会确认find()一定能找到结果，不会报错
rank: typeValue.find(x => x.value === currentType).rank

你可以根据自己的业务场景选最合适的方案——如果允许存在找不到的情况，方案1最省心；如果能确保类型一定匹配，方案3或者非空断言会更简洁。

内容的提问来源于stack exchange，提问作者Arjun Ghimire