React Native Expo接入Firebase Phone Auth跨页传verificationId报错求解

核心问题为Login页异步逻辑执行顺序错误：verifyPhoneNumber是异步方法，当前代码在调用该方法后立刻执行跳转，此时接口还未返回verificationId，且React state更新本身为异步操作，跳转时传递的还是初始值null，因此OTP页无法获取有效参数。

1. 修复Login页代码 #

核心调整：等待异步接口返回verificationId后再执行跳转，直接使用接口返回的结果传参，避免依赖state更新的异步延迟。

const Login = () => {
  const navigation = useNavigation();
  const [phoneNumber, setPhoneNumber] = useState();
  const recaptchaVerifier = useRef(null);

  const sendVerification = async () => {
    try {
      const phoneProvider = new firebase.auth.PhoneAuthProvider();
      // 等待异步方法返回校验ID后再跳转
      const verificationId = await phoneProvider.verifyPhoneNumber(phoneNumber, recaptchaVerifier.current);
      navigation.navigate('OTPScreen', { verificationId });
    } catch (error) {
      alert(error);
    }
  };

  return(
    // 原有页面渲染逻辑保持不变
  )
}

2. 修复OTP页代码 #

修正语法错误，增加参数空值保护，避免异常报错：

import { useNavigation, useRoute } from '@react-navigation/native';

const OTPScreen = () => {
  const navigation = useNavigation();
  const route = useRoute();
  // 增加可选链做参数空值保护
  const verificationId = route.params?.verificationId;
  const [code, setCode] = useState('');

  const confirmCode = async () => {
    try {
      const credential = firebase.auth.PhoneAuthProvider.credential(
        verificationId,
        code
      );
      const result = await firebase.auth().signInWithCredential(credential);
      console.log(result); 
      navigation.navigate('Home');
    } catch (error) {
      alert(`验证失败：${error.message}`);
    }
  };

  return(
    // 原有页面渲染逻辑保持不变
  )
}

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