Expo Secure Store配合RTK Query配置Token请求头报错排查

你的代码存在两个致命问题，直接导致报错和鉴权失败：

1. getToken方法写法错误：混用async/await和then链式调用，且没有正确返回读取到的结果，所有调用该方法的位置拿到的永远是异步Promise对象，而非实际的Token字符串。你报错里提到的带_U/_V/_W/_X字段的对象，就是React Native环境里Promise实例的内部结构，你把这个对象当成字符串拼接到请求头、甚至误放到JSX中渲染时，就会触发React子元素校验报错。
2. prepareHeaders逻辑没有处理异步读取：Expo SecureStore的所有读写操作都是异步API，不存在同步返回值的调用方式，你用同步写法直接调用getToken，拿到的是pending状态的Promise，根本拿不到实际Token值，自然无法生成合法的Bearer鉴权头。

第一步：修复Token读取工具方法 #

去掉冗余的then调用，正确返回异步读取结果，异常时返回空值避免逻辑崩溃：

const getToken = async (key) => {
  try {
    return await SecureStore.getItemAsync(key);
  } catch (error) {
    console.log("读取安全存储失败：", error);
    return null;
  }
};

第二步：改造prepareHeaders支持异步读取 #

fetchBaseQuery的prepareHeaders本身支持异步函数，只要加async关键字、内部await等待Token读取完成即可，不需要额外封装其他逻辑：

baseQuery: fetchBaseQuery({ 
  baseUrl: 'http://example.com/api',
  prepareHeaders: async (headers, { getState }) => {
    // 等待异步存储读取完成，拿到实际Token字符串
    const token = await getToken('userToken');
    if (token) {
      headers.set('authorization', `Bearer ${token}`);
    }
    return headers;
  },
}),

• 如果你对接口请求性能要求更高，可以在App启动阶段一次性把Token从Expo SecureStore读取到Redux全局状态中，后续prepareHeaders直接通过getState()取同步的Token值即可，省去每次请求都调用原生存储的开销。
• 注意不要在组件的JSX渲染段直接调用getToken这类返回Promise的异步方法，异步读取操作必须放在useEffect、事件回调、请求拦截器这类副作用执行位置，避免触发React子元素类型报错。

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