React Native：如何为路由/屏幕导航参数设置默认值

你遇到的问题其实很常见——当useRoute().params可能为undefined时，直接给解构的属性加默认值不会生效，因为你本质上是在解构一个undefined的对象，这时候属性的默认值逻辑不会触发。下面给你两种简单可行的解决方案：

方法一：先给params兜底为空对象，再解构参数 #

先把params默认成空对象，再给每个导航参数设置默认值，这样即使没有传递任何参数，解构也能正常拿到默认值：

const { params = {} } = useRoute();
const { 
  chat_id = '', 
  headerTitle = '默认聊天标题', 
  headerImage = '', 
  receiver_id = '', 
  user = {}, 
  adrequest_id = '', 
  ad_id = '', 
  ad = {}, 
  name = '匿名用户' 
} = params;

方法二：用空值合并操作符（??）直接兜底 #

可以把逻辑简化成一行，用??操作符在params为undefined或null时，替换成空对象：

const { 
  chat_id = '', 
  headerTitle = '默认聊天标题', 
  headerImage = '', 
  receiver_id = '', 
  user = {}, 
  adrequest_id = '', 
  ad_id = '', 
  ad = {}, 
  name = '匿名用户' 
} = useRoute().params ?? {};

为什么原来的方式不生效？ #

当你直接写const { chat_id = '' } = useRoute().params时，如果导航没有传递参数，useRoute().params是undefined，这时候解构undefined的属性，JavaScript不会触发默认值的赋值逻辑——默认值只有在属性**存在但为undefined**时才会生效，而不是整个解构对象为undefined时。所以必须先把params兜底成一个空对象，再解构里面的属性。

如果你的项目用了TypeScript，还可以给导航参数定义类型，让解构更安全：

type ChatScreenParams = {
  chat_id?: string;
  headerTitle?: string;
  // ... 其他参数的可选类型定义
};

const route = useRoute<RouteProp<Record<string, ChatScreenParams>, 'ChatScreen'>>();
const { 
  chat_id = '', 
  headerTitle = '默认聊天标题' 
  // ... 其他参数默认值
} = route.params ?? {};

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