T
TanStack•2mo ago
fascinating-indigo

Eslint rule `@typescript-eslint/no-unsafe-assignment` triggers on `useParams` or `useSearch`

I've recently tried to update my code all the way up to the latest version and noticed a few eslint issues here and there in my codebase. I could trace it down to a change between 1.132.0-alpha.4 and 1.132.0-alpha.8. I get the following error:
Unsafe assignment of an any value @typescript-eslint/no-unsafe-assignment
on this line of code: 
  const { companyId: companyIdPathParam, siteId: siteIdPathParam } = useParams({ strict: false });
  const { companyId: companyIdPathParam, siteId: siteIdPathParam } = useParams({ strict: false });
We have a structure, where all our URLs start with frontend/src/routes/company/$companyId/site/$siteId, so we are quite confident both those variables exist. Another example where we get this is: 
  const { inspectType, inspectId } = useSearch({ strict: false });
  const { inspectType, inspectId } = useSearch({ strict: false });
But we are quite confident those two search-params exist, because our root component is defined as: 
const inspectorSearchParamsSchema = z
  .object({
    inspectType: InspectorContentType,
    inspectId: z.string(),
  })
  .or(
    z.object({
      inspectType: z.undefined(),
      inspectId: z.undefined(),
    }),
  );
type InspectorSearchParams = z.infer<typeof inspectorSearchParamsSchema>;

export const Route = createRootRouteWithContext()({
  component: RootComponent,
  errorComponent: ({ error }) => (
    <>
      <PageLayout hideSidebar={true}>
        <GlobalError error={error} />
      </PageLayout>
    </>
  ),
  validateSearch: (input) => inspectorSearchParamsSchema.parse(input),
  search: {
    middlewares: [
      retainSearchParams<InspectorSearchParams>(["inspectType", "inspectId"]),
    ],
  },
});
const inspectorSearchParamsSchema = z
  .object({
    inspectType: InspectorContentType,
    inspectId: z.string(),
  })
  .or(
    z.object({
      inspectType: z.undefined(),
      inspectId: z.undefined(),
    }),
  );
type InspectorSearchParams = z.infer<typeof inspectorSearchParamsSchema>;

export const Route = createRootRouteWithContext()({
  component: RootComponent,
  errorComponent: ({ error }) => (
    <>
      <PageLayout hideSidebar={true}>
        <GlobalError error={error} />
      </PageLayout>
    </>
  ),
  validateSearch: (input) => inspectorSearchParamsSchema.parse(input),
  search: {
    middlewares: [
      retainSearchParams<InspectorSearchParams>(["inspectType", "inspectId"]),
    ],
  },
});
The type we see on hover in our editor are not any, so it could also be a problem of the eslint rule. Any help would be appreciated!
1 Reply
absent-sapphire
absent-sapphire•2mo ago
The type we see on hover in our editor are not any
If this is the case, it is probably eslint issue. By the way, instead of validateSearch: (input) => inspectorSearchParamsSchema.parse(input). It should be validateSearch: inspectorSearchParamsSchema, If you do that, there shouldn't be any need to provide generic types

Did you find this page helpful?