TypeScript中react-native-elements Avatar组件source类型不匹配求助

问题根源是auth?.currentUser?.photoURL的类型为string | null | undefined，而ImageSourcePropType要求uri必须是字符串类型——当photoURL为null或undefined时，{ uri: ... }就不符合类型约束了。以下是几种可行的修正方案：

方案1：条件渲染赋值 #

通过判断photoURL是否存在，决定传递有效的source或undefined，完全贴合TypeScript类型检查规则：

<Avatar
  source={auth?.currentUser?.photoURL ? { uri: auth.currentUser.photoURL } : undefined}
/>

方案2：非空断言（谨慎使用） #

如果你能确保当前场景下auth?.currentUser?.photoURL一定是字符串（不会为null/undefined），可以用非空断言!强制告知TypeScript该值有效：

<Avatar
  source={{ uri: auth?.currentUser?.photoURL! }}
/>

注意：若实际运行中photoURL可能为null，这种写法会引发运行时错误，仅在值确定存在的场景使用。

方案3：提前抽离变量并判断 #

把photoURL抽离单独处理，让代码逻辑更清晰：

const userPhotoURL = auth?.currentUser?.photoURL;

// 后续渲染
<Avatar
  source={userPhotoURL ? { uri: userPhotoURL } : undefined}
/>

另外你之前自定义AvatarSource接口无效的原因是：react-native-elements的Avatar组件已经内置使用React Native官方的ImageSourcePropType作为source的类型，自定义接口无法覆盖组件自带的类型定义，因此不会生效。

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