iflytek/astron-agent · error · Error

useDatabaseContext must be used within a DatabaseProvider

Error message

useDatabaseContext must be used within a DatabaseProvider

What it means

`useDatabaseContext` provides state, actions and refs (state/actions/testTableRef) for the database-detail page via DatabaseProvider. If the hook is called with no provider ancestor, the null context triggers 'useDatabaseContext must be used within a DatabaseProvider'. It converts a silent null crash into an actionable message.

Solutions

Wrap the consuming page/subtree with <DatabaseProvider>.
For modals/portals, render the portal node inside the provider component so context propagates.
Wrap test renders with DatabaseProvider (or a fixture provider).
Split hooks if a component only needs partial state, so it can live outside the provider.

Example fix

// before
<DatabaseDetailContent /> // throws

// after
<DatabaseProvider databaseId={id}>
  <DatabaseDetailContent />
</DatabaseProvider>

Defensive patterns

Strategy: try-catch

Validate before calling

const useDatabaseContextSafe = (): DatabaseContextType | undefined => useContext(DatabaseContext);

Type guard

function hasDatabaseContext(c: unknown): c is DatabaseContextType {
  return !!c && 'state' in (c as object) && 'actions' in (c as object);
}

Try / catch

let db: DatabaseContextType;
try {
  db = useDatabaseContext();
} catch {
  return <DatabaseUnavailable />; // or redirect to list page
}

Prevention

Enclose the whole database-detail page in <DatabaseProvider> including drawers and portals.
Mount portal containers inside the provider tree so context propagates.
Create a providers.jsx test wrapper combining all required providers.
Document the provider requirement on each hook's JSDoc.

When it happens

Trigger: Rendering a database-detail child component outside <DatabaseProvider>; using its hooks in a sibling page; wrapping provider in a route component while a child is reused elsewhere (e.g. drawer or modal rendered through a portal outside the provider tree).

Common situations: Reusing detail sub-components in list pages; test renders without provider; refactoring routes so the provider no longer encloses the consumer; portals that escape the React tree unless the portal root is inside the provider.

Understand the failure class

Background: "missing required argument" and "the following required arguments were not provided": what required-argument errors mean and how to fix them — this error's family across 20 libraries.

Related errors

AI-assisted analysis of iflytek/astron-agent@5e758547a8 (2026-09-12). Data as JSON: /api/errors/7b0134cc3ecb68ce. Report an issue: GitHub.

Appendix: source

Thrown at console/frontend/src/pages/resource-management/database-detail/context/database-context.tsx:300

      dispatch,
      testTableRef,
      actions,
    }),
    [state, dispatch, testTableRef, actions]
  );

  return (
    <DatabaseContext.Provider value={value}>
      {children}
    </DatabaseContext.Provider>
  );
};

// 自定义Hook
export const useDatabaseContext = (): DatabaseContextType => {
  const context = useContext(DatabaseContext);
  if (!context) {
    throw new Error(
      'useDatabaseContext must be used within a DatabaseProvider'
    );
  }
  return context;
};

// 分别导出各个部分的Hook，保持API的简洁性
export const useDatabaseState = (): DatabaseState => {
  const { state } = useDatabaseContext();
  return state;
};

export const useDatabaseActions = (): DatabaseContextType['actions'] => {
  const { actions } = useDatabaseContext();
  return actions;
};

export const useTestTableRef = (): RefObject<{

View on GitHub (pinned to 5e758547a8)