React Native使用apisauce时出现baseURL.replace is not a function报错如何解决

错误原因 #

• apisauce的setBaseURL方法仅支持传入字符串类型的URL值，不支持传入异步函数，你将async函数直接作为参数传入，是触发TypeError的直接原因。
• 你的异步逻辑嵌套层级过多，且没有在then链中返回URL值，即使后续处理异步逻辑也无法拿到Firestore返回的有效URL。
• 直接访问document._data属于调用Firestore SDK私有属性，不符合官方规范，正确做法是调用document.data()方法获取文档数据。

修复方案 #

你需要拆分客户端初始化逻辑：先创建基础apiClient实例，单独封装异步初始化方法完成匿名登录、拉取配置、设置baseURL的流程，在应用入口处等待初始化完成后再使用apiClient发起请求。

修复后的代码 #

import {create} from 'apisauce';
import auth from '@react-native-firebase/auth';
import firestore from '@react-native-firebase/firestore';

// 初始化基础API客户端
const apiClient = create({
  method: 'POST',
  baseURL: '',
});

// 异步初始化方法，完成登录、拉取配置、设置baseURL全流程
export const initApiClient = async () => {
  try {
    // 匿名登录Firebase
    await auth().signInAnonymously();
    // 拉取服务URL配置
    const document = await firestore()
      .collection('service_url')
      .doc('service_url')
      .get();
    
    if (!document.exists) {
      throw new Error('服务URL配置不存在');
    }

    const baseURL = document.data().url.toString();
    apiClient.setBaseURL(baseURL);
    return true;
  } catch (error) {
    console.error('API客户端初始化失败：', error);
    return false;
  }
}

export default apiClient;

使用示例 #

在应用启动入口（如App.js）先执行初始化逻辑：

import React, { useEffect } from 'react';
import { initApiClient } from './你的apiClient文件路径';

const App = () => {
  useEffect(() => {
    const initApp = async () => {
      const isApiReady = await initApiClient();
      if (isApiReady) {
        // 初始化成功后可正常调用apiClient发起请求
      }
    };
    initApp();
  }, []);

  // 其他应用逻辑
  return <></>;
};

export default App;

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