feat(ui): List available param keys in useParams (#83428)

Author: scttcper

static/app/utils/useParams.tsx

@@ -5,7 +5,41 @@ import {CUSTOMER_DOMAIN, USING_CUSTOMER_DOMAIN} from 'sentry/constants';
 
 import {useTestRouteContext} from './useRouteContext';
 
-export function useParams<P = Record<string, string>>(): P {
+/**
+ * List of keys used in routes.tsx `/example/:paramKey/...`
+ *
+ * Prevents misspelling of param keys
+ */
+type ParamKeys =
+  | 'apiKey'
+  | 'dataExportId'
+  | 'eventId'
+  | 'groupId'
+  | 'id'
+  | 'installationId'
+  | 'integrationSlug'
+  | 'issueId'
+  | 'memberId'
+  | 'orgId'
+  | 'projectId'
+  | 'release'
+  | 'scrubbingId'
+  | 'searchId'
+  | 'sentryAppSlug'
+  | 'shareId'
+  | 'spanSlug'
+  | 'teamId'
+  | 'widgetIndex';
+
+/**
+ * Get params from the current route. Param availability depends on the current route.
+ *
+ * @example
+ * ```tsx
+ * const params = useParams<{projectId: string}>();
+ * ```
+ */
+export function useParams<P = Partial<Record<ParamKeys, string | undefined>>>(): P {
   // When running in test mode we still read from the legacy route context to
   // keep test compatability while we fully migrate to react router 6
   const testRouteContext = useTestRouteContext();

static/app/views/profiling/continuousProfileFlamegraph.tsx

@@ -89,7 +89,7 @@ function ContinuousProfileFlamegraph(): React.ReactElement {
       <FlamegraphStateProvider initialState={initialFlamegraphPreferencesState}>
         <ProfileGroupTypeProvider
           input={profiles.type === 'resolved' ? profiles.data : null}
-          traceID={params.eventID!}
+          traceID={params.eventId!}
         >
           <FlamegraphThemeProvider>
             <FlamegraphStateQueryParamSync />

static/app/views/profiling/profileFlamechart.tsx

@@ -90,7 +90,7 @@ function ProfileFlamegraph(): React.ReactElement {
       <FlamegraphStateProvider initialState={initialFlamegraphPreferencesState}>
         <ProfileGroupTypeProvider
           input={profiles.type === 'resolved' ? profiles.data : null}
-          traceID={params.eventID!}
+          traceID={params.eventId!}
         >
           <FlamegraphThemeProvider>
             <FlamegraphStateQueryParamSync />