DrawerNavigator无法访问StackNavigator，点击列表项跳转详情页报错

Hey there! Let's figure out how to fix that pesky "Undefined is not an object" error you're getting when tapping into a story/joke detail screen. This is a super common snag with React Native navigation, so let's walk through the most likely fixes step by step:

1. Make sure you're passing data correctly when navigating #

The most common cause here is that you're either not passing the story/joke item to the detail screen, or the detail screen isn't accessing it properly.

First, double-check your list item's onPress handler. You need to explicitly pass the item data as a parameter when calling navigation.navigate:

// Inside your FlatList/ScrollView renderItem function
<TouchableOpacity
  onPress={() => {
    navigation.navigate('DetailScreen', { 
      contentItem: itemData.item // Make sure this is the actual story/joke object
    });
  }}
>
  <Text>{itemData.item.title}</Text>
</TouchableOpacity>

Then, in your detail screen, use optional chaining or fallback values to avoid errors if params is undefined:

// In DetailScreen component
import { useRoute } from '@react-navigation/native';

function DetailScreen() {
  const route = useRoute();
  // Use optional chaining to safely access the item
  const contentItem = route.params?.contentItem;
  // Or use a fallback empty object if params is missing
  const { contentItem } = route.params || {};

  if (!contentItem) {
    return <Text>No content found</Text>; // Handle missing data gracefully
  }

  return (
    <View>
      <Text>{contentItem.title}</Text>
      <Text>{contentItem.body}</Text>
    </View>
  );
}

2. Verify your navigation stack setup #

If your detail screen isn't properly registered in your navigation stack, the navigation might fail silently or throw unexpected errors. Since you're using a Drawer Navigator, you'll need to nest a Stack Navigator inside each drawer screen to handle the list-to-detail flow.

Here's how that should look:

import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

// Create a stack for Love Stories (list + detail)
function LoveStoriesStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="LoveStoriesList" component={LoveStoriesListScreen} />
      <Stack.Screen name="LoveStoryDetail" component={LoveStoryDetailScreen} />
    </Stack.Navigator>
  );
}

// Create a stack for Jokes (list + detail)
function JokesStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="JokesList" component={JokesListScreen} />
      <Stack.Screen name="JokeDetail" component={JokeDetailScreen} />
    </Stack.Navigator>
  );
}

// Main Drawer Navigator
function AppNavigator() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="LoveStories" component={LoveStoriesStack} />
      <Drawer.Screen name="Jokes" component={JokesStack} />
    </Drawer.Navigator>
  );
}

This way, when you call navigation.navigate('LoveStoryDetail', { ... }) from the list screen, the stack navigator knows exactly where to go.

3. Ensure your list data is fully loaded before rendering #

If you're fetching your stories/jokes asynchronously, there's a chance you're rendering the list before the data is ready. That means when a user taps an item, the item might be undefined.

Add a loading state to your list screen to prevent this:

import { ActivityIndicator, FlatList } from 'react-native';
import { useState, useEffect } from 'react';

function LoveStoriesListScreen() {
  const [stories, setStories] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // Simulate an API call
    fetchYourLoveStories()
      .then(data => {
        setStories(data);
        setIsLoading(false);
      })
      .catch(error => {
        console.error(error);
        setIsLoading(false);
      });
  }, []);

  if (isLoading) {
    return <ActivityIndicator size="large" color="#0000ff" />;
  }

  return (
    <FlatList
      data={stories}
      renderItem={({ item }) => (
        // Only render the item if it exists
        item ? (
          <TouchableOpacity onPress={() => navigation.navigate('LoveStoryDetail', { story: item })}>
            <Text>{item.title}</Text>
          </TouchableOpacity>
        ) : null
      )}
      keyExtractor={item => item.id.toString()}
    />
  );
}

4. Check for typos in screen names or parameter keys #

It's easy to mistype a screen name (like "DetaiScreen" instead of "DetailScreen") or a parameter key (like "storyItem" instead of "contentItem"). Double-check that the name you use in navigation.navigate matches exactly with the screen name registered in your navigator, and that the parameter key matches what you're trying to access in the detail screen.

Start with these checks—they should cover 90% of cases where this error pops up!

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