Reactfire中useFirestoreDocData的文档不存在与权限错误处理

我在函数式组件中使用Reactfire，代码如下：

export const SafeFileView = (props) => {
const db = useFirestore();
const fileRef = doc(db, 'content/' + props.sources.fileId);
const { status, data: currentFile } = useFirestoreDocData(fileRef);
if (status === 'loading') {
    return (<div>
        loading file
    </div>)
}
return ( 
    <div>Working!</div>
)
}

当传入错误ID时，代码会抛出FirebaseError: Missing or insufficient permissions.错误。我尝试用<ErrorBoundary>组件包裹组件，但无法捕获异步错误。请问正确的错误处理方式是什么？我希望在请求的文档不存在或获取文档出错时，向用户展示不同的模板。

Reactfire的useFirestoreDocData钩子会在返回结果中包含错误信息，直接解构error字段即可捕获异步请求中的错误，无需依赖ErrorBoundary（它仅处理渲染阶段的同步错误）。

修改后的代码如下：

export const SafeFileView = (props) => {
  const db = useFirestore();
  const fileRef = doc(db, 'content/' + props.sources.fileId);
  // 解构获取error字段
  const { status, data: currentFile, error } = useFirestoreDocData(fileRef);

  if (status === 'loading') {
    return <div>loading file</div>;
  }

  // 处理错误场景
  if (error) {
    // 根据Firebase错误码区分不同情况
    switch (error.code) {
      case 'permission-denied':
        return <div>权限不足，无法访问该文件</div>;
      case 'not-found':
        return <div>请求的文件不存在</div>;
      default:
        return <div>加载文件出错：{error.message}</div>;
    }
  }

  return <div>Working! 文件内容：{JSON.stringify(currentFile)}</div>;
};

核心说明 #

• Reactfire的异步数据钩子会把请求过程中的错误封装在返回的error对象里，可直接在组件内判断处理。
• Firebase错误可通过error.code区分类型，常见的包括permission-denied（权限不足）、not-found（文档不存在）等。
• ErrorBoundary无法捕获这类异步错误，因为它们发生在组件渲染完成后的异步数据流中，不属于渲染阶段的同步错误。

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