React Native嵌套导航器传参报错，如何修复？

首先，你的报错核心是嵌套导航的跳转路径错误，以及参数传递时未处理默认值导致的未定义问题，结合你的导航结构（Stack → Tab → (Drawer + TechInfo)，Drawer包含ProfileInfo），下面是具体修复步骤：

1. 修正导航跳转路径 #

你当前用navigation.navigate('Drawer', ...)报错，是因为Tab Navigator中注册的Drawer导航器并不是叫"Drawer"，而是你在Tab.Screen中定义的name属性值（比如你可能给它起的是"ProfileTab"这类名字）。嵌套导航的跳转需要逐层指定路径：

正确跳转示例（假设你的导航注册如下） #

先确认你的导航注册结构：

// 1. Drawer导航器
const Drawer = createDrawerNavigator();
function ProfileDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="ProfileInfo" component={ProfileInfo} />
    </Drawer.Navigator>
  );
}

// 2. Tab导航器：包含Drawer导航器和TechInfo页面
const Tab = createBottomTabNavigator();
function MainTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="ProfileDrawer" component={ProfileDrawer} /> {/* 这里的name是Tab中Drawer的标识 */}
      <Tab.Screen name="TechInfo" component={TechInfo} />
    </Tab.Navigator>
  );
}

// 3. 根Stack导航器：包含SignUp和Tab导航器
const Stack = createStackNavigator();
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="SignUp" component={SignUp} />
        <Stack.Screen name="MainTabs" component={MainTabs} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在SignUp页面的提交按钮中，需要逐层指定导航路径来跳转到ProfileInfo并传参：

// SignUp页面提交逻辑
const handleSubmit = () => {
  const userData = { userName: "a", userLast: "a", userNumber: "a", userBirth: "a", userfrom: "a", userlivein: "a" };
  
  // 正确的嵌套导航跳转+传参
  navigation.navigate('MainTabs', {
    screen: 'ProfileDrawer',
    params: {
      screen: 'ProfileInfo',
      params: { user: userData }
    }
  });
};

2. 修复ProfileInfo页面参数未定义问题 #

在ProfileInfo页面中，给参数添加默认值，避免因参数未传递导致的"user未定义"报错：

function ProfileInfo({ route }) {
  // 解构参数时添加默认值兜底
  const { user = {} } = route.params?.params || {};

  return (
    <View>
      <Text>用户名：{user.userName}</Text>
      <Text>姓氏：{user.userLast}</Text>
      <Text>手机号：{user.userNumber}</Text>
      {/* 其他用户信息展示 */}
    </View>
  );
}

3. 同时更新TechInfo页面数据的方案 #

如果你需要提交表单后同时更新TechInfo和ProfileInfo两个页面的数据，仅用导航传参无法实现（因为TechInfo可能已经在Tab栈中，不会自动接收新参数），建议使用状态管理方案：

• 使用React Context API创建全局状态，存储用户表单数据
• TechInfo和ProfileInfo页面直接从Context中读取数据，无需依赖导航参数
• SignUp页面提交时更新Context中的数据，两个页面会自动刷新

Context示例简化版 #

// UserContext.js
import { createContext, useContext, useState } from 'react';

const UserContext = createContext();

export function UserProvider({ children }) {
  const [userData, setUserData] = useState({});

  return (
    <UserContext.Provider value={{ userData, setUserData }}>
      {children}
    </UserContext.Provider>
  );
}

export function useUser() {
  return useContext(UserContext);
}

然后在App.js中包裹导航：

function App() {
  return (
    <UserProvider>
      <NavigationContainer>
        {/* 原导航结构 */}
      </NavigationContainer>
    </UserProvider>
  );
}

SignUp页面提交时更新Context：

import { useUser } from './UserContext';

function SignUp() {
  const { setUserData } = useUser();

  const handleSubmit = () => {
    const userData = { /* 表单数据 */ };
    setUserData(userData);
    // 跳转到目标页面
    navigation.navigate('MainTabs');
  };
}

TechInfo和ProfileInfo页面直接读取Context：

import { useUser } from './UserContext';

function ProfileInfo() {
  const { userData } = useUser();
  return <Text>{userData.userName}</Text>;
}

function TechInfo() {
  const { userData } = useUser();
  return <Text>{userData.userNumber}</Text>;
}

内容的提问来源于stack exchange，提问作者Hasan Kaan Kahraman