React Native报错relativePath.split is not a function 求助排查Hook问题

问题背景 #

自定义useTagsCollection Hook用于获取Firestore标签数据，结构与其他正常工作的Hook一致，但在组件useEffect中调用时，抛出错误：*relativePath.split is not a function (it is undefined)*。已确认Firestore集合名称正确，相关代码如下：

Hook代码 #

export const useTagsCollection = () => {
  const navigation = useNavigation();
  const getTag = ({id, setTag}: useTagsCollectionGetTagProps) => {
    firestore()
      .collection('tags')
      .doc(id)
      .get()
      .then(snapshot => {
        const data = snapshot.data();
        if (data) {
          setTag(data as tagCollection);
        }
      })
      .catch(error => {
        navigation.navigate('Error', {error: error.toString()});
      });
  };
  return {getTag};
};

组件调用代码 #

const [tag, setTag] = useState<tagCollection>();
const {getTag} = useTagsCollection();

useEffect(() => {
  getTag({id: article.tags, setTag}); // 此处抛出错误
}, []);

类型定义 #

export interface tagCollection {
  id: string;
  title: string;
  created_at: FirebaseFirestoreTypes.Timestamp;
}

export interface useTagsCollectionGetTagProps {
  id: string;
  setTag: Dispatch<SetStateAction<tagCollection | undefined>>;
}

排查方向与解决方案 #

1. 检查article.tags的类型是否匹配 #

从类型定义看，getTag的id参数要求是string类型，但你传入的是article.tags。如果article.tags不是字符串（比如是数组、对象或者undefined），Firestore的doc()方法接收非法参数会触发内部错误，表现为relativePath.split is not a function。

解决方法：

• 先打印article.tags的值，确认其类型和内容：

  useEffect(() => {
    console.log('article.tags:', article.tags, typeof article.tags);
    // 确保id是字符串类型再调用
    if (typeof article.tags === 'string') {
      getTag({id: article.tags, setTag});
    } else {
      console.error('Invalid tag ID type:', article.tags);
    }
  }, [article.tags]);
  

• 如果article.tags是数组（比如一篇文章对应多个标签），需要调整逻辑：遍历数组逐个获取标签，或者修改getTag支持批量获取。

2. 检查Firestore初始化与配置 #

虽然你确认了集合名称正确，但Firestore实例初始化异常也可能导致这类内部错误。比如：

• 有没有在项目中正确配置Firebase（尤其是Firestore部分）？
• 是否在调用firestore()前完成了Firebase初始化？

解决方法：

• 确认Firebase初始化代码在App入口处执行，比如：

  import { initializeApp } from 'firebase/app';
  import { getFirestore } from 'firebase/firestore';
  
  const firebaseConfig = { /* 你的配置 */ };
  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);
  

• 替换Hook中的firestore()为初始化后的db实例，避免重复初始化导致的异常。

3. 检查useNavigation的使用场景 #

如果该Hook在非React Navigation路由组件中使用，useNavigation可能返回异常对象，导致后续navigation.navigate触发错误（虽然错误提示指向relativePath.split，但异常传播可能掩盖真实原因）。

解决方法：

• 确认调用useTagsCollection的组件处于React Navigation的路由栈中；
• 或者在Hook中添加navigation的有效性判断：

  .catch(error => {
    if (navigation && navigation.navigate) {
      navigation.navigate('Error', {error: error.toString()});
    } else {
      console.error('Navigation unavailable:', error);
    }
  });
  

4. 类型断言的潜在问题 #

setTag(data as tagCollection)中的类型断言可能掩盖数据结构不匹配的问题，如果Firestore返回的data缺少id字段（因为Firestore文档的id不在data()返回值中），后续使用tag时可能触发其他错误，但也可能间接导致当前异常。

解决方法：

• 获取文档时同时带上id：

  if (data) {
    setTag({...data, id: snapshot.id} as tagCollection);
  }
  

内容的提问来源于stack exchange，提问作者Thaïs