React Context报错：useData No DataProvider available 排查求助

1. 修正OAuthProvider的参数传递错误 #

你的OAuthProvider组件定义时接收的参数是token，但内部给AuthProvider传递的是未定义的ottToken变量，这是明显的笔误。修正后代码如下：

export const OAuthProvider = ({ token, authSpaUrl, apiUrl, children }: OAuthProviderProps) => {
  return (
    <ClientProvider url={apiUrl}>
      <DataProvider>
        {/* 将 ottToken={ottToken} 改为 ottToken={token} */}
        <AuthProvider ottToken={token} authSpaUrl={authSpaUrl}>
          {children}
        </AuthProvider>
      </DataProvider>
    </ClientProvider>
  );
};

这个错误会导致AuthProvider无法获取正确的token，可能引发后续状态初始化失败，甚至间接导致DataProvider的上下文无法被正确访问。

2. 确认DataProvider的上下文包裹范围 #

检查以下几点确保组件在DataProvider的上下文范围内：

• 确认OAuthProviderConsumer组件确实被包含在OAuthProvider内部（你的测试代码中已经做到了这一点）。
• 检查AuthProvider的实现，确保它只是直接渲染children，没有通过React Portal或其他方式将children移出DataProvider的上下文层级。如果AuthProvider有条件渲染逻辑，要保证children始终在DataProvider的包裹下。

3. 验证DataStateContext的初始化 #

检查DataStateContext的创建代码，确保它的默认值不会导致误判：

// src/context/data/dataContext.ts
import { createContext } from 'react';
import type { DataState } from '../store/dataState';

// 传入initialState作为默认值，避免未包裹Provider时直接返回undefined
export const DataStateContext = createContext<DataState | undefined>(undefined);

同时，确保initialState是一个有效的对象，这样DataProvider初始化后，useData就能拿到正确的state，不会触发错误。

4. 测试中添加调试步骤 #

在测试的createWrapper函数中添加渲染结构的输出，确认DataProvider是否正确包裹了OAuthProviderConsumer：

const createWrapper = (token?: string) => {
  const { container } = render(
    <OAuthProvider authSpaUrl={FAKE_SPA_AUTH_URL} apiUrl={FAKE_AUTH_DOMAIN} ottToken={token}>
      <OAuthProviderConsumer />
    </OAuthProvider>,
  );
  console.log('渲染的组件结构:', container.innerHTML);
};

通过输出可以直观看到组件树的层级，确认DataProvider是否存在，以及OAuthProviderConsumer是否在其内部。

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