Expo React Native接入Firebase Auth出现已卸载组件状态更新警告求解

• 核心原因是异步的Firestore请求返回前，组件已经被卸载（比如用户跳转离开当前页面、组件被条件渲染移除等场景），此时仍执行setFirstName更新已卸载组件的状态，React判定存在内存泄漏风险因此抛出警告。
• 你当前代码的useEffect未传入第二个依赖数组，会导致每次组件重渲染都重复触发getUserInfo请求，进一步提升了警告触发的概率。

你可以通过挂载状态标记+useEffect清理函数的方式完全解决该警告，修复后代码如下：

const [firstName, setFirstName] = useState('');

useEffect(() => { 
  // 标记组件是否处于挂载状态
  let isMounted = true;
  // 建议把uid获取放到useEffect内部，避免组件挂载时用户状态异常导致报错
  const currentUserUID = firebase.auth().currentUser?.uid;

  async function getUserInfo(){
    if (!currentUserUID) return;
    try {
      const doc = await firebase
        .firestore()
        .collection('users')
        .doc(currentUserUID)
        .get();

      if (!doc.exists){
        Alert.alert('未找到用户数据！')
      } else {
        const dataObj = doc.data();
        // 仅当组件未卸载时才更新状态
        if (isMounted) {
          setFirstName(dataObj.firstName);
        }
      }
    } catch (err){
      Alert.alert('出现错误', err.message)
    }
  }

  getUserInfo();

  // 组件卸载时触发的清理函数，修改挂载标记位
  return () => {
    isMounted = false;
  }
// 空依赖数组，保证仅在组件首次挂载时执行一次请求
}, [])

如果你的项目使用React 18及以上版本，也可以搭配AbortController直接取消未完成的Firestore请求，上述标记位方案兼容所有React版本，足够覆盖你的使用场景。

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