diff --git a/examples/react/start-basic-react-query/src/routes/index.tsx b/examples/react/start-basic-react-query/src/routes/index.tsx
index 37c8d237bd4..1d6eba35fae 100644
--- a/examples/react/start-basic-react-query/src/routes/index.tsx
+++ b/examples/react/start-basic-react-query/src/routes/index.tsx
@@ -1,12 +1,36 @@
+import * as React from 'react'
+import { useMutation } from '@tanstack/react-query'
 import { createFileRoute } from '@tanstack/react-router'
+import { createServerFn, useServerFn } from '@tanstack/react-start'
+
+const greetUser = createServerFn({ method: 'POST' })
+  .inputValidator((input: { name: string }) => input)
+  .handler(async ({ data }) => {
+    return Promise.resolve({ message: `Hello ${data.name}!` })
+  })
+
 export const Route = createFileRoute('/')({
   component: Home,
 })
 
 function Home() {
+  const greetingMutation = useMutation({
+    mutationFn: useServerFn(greetUser),
+    onSuccess: (data) => data,
+  })
+
   return (
-    <div className="p-2">
-      <h3>Welcome Home!!!</h3>
+    <div className="p-2 flex flex-col gap-2">
+      <h3>useServerFn + useMutation demo</h3>
+      <button
+        className="rounded bg-blue-500 px-3 py-1 text-white"
+        onClick={() => greetingMutation.mutate({ data: { name: 'TanStack' } })}
+      >
+        Say hi
+      </button>
+      {greetingMutation.data ? (
+        <p data-testid="greeted">{greetingMutation.data.message}</p>
+      ) : null}
     </div>
   )
 }
diff --git a/packages/react-start/src/tests/useServerFnMutation.test-d.tsx b/packages/react-start/src/tests/useServerFnMutation.test-d.tsx
new file mode 100644
index 00000000000..10c307b22f2
--- /dev/null
+++ b/packages/react-start/src/tests/useServerFnMutation.test-d.tsx
@@ -0,0 +1,36 @@
+import { useMutation } from '@tanstack/react-query'
+import { createServerFn, useServerFn } from '../index'
+
+const serverFn = createServerFn({ method: 'POST' })
+  .inputValidator((input: { name: string }) => input)
+  .handler(async ({ data }) => ({
+    message: `Hello ${data.name}!`,
+  }))
+
+const optionalServerFn = createServerFn().handler(async () => ({
+  ok: true as const,
+}))
+
+export function UseServerFnMutationRegressionComponent() {
+  const mutation = useMutation({
+    mutationFn: useServerFn(serverFn),
+    onSuccess: (data, variables) => {
+      data.message
+      variables.data.name
+    },
+  })
+
+  void mutation
+  return null
+}
+
+export function useOptionalServerFnRegressionHook() {
+  const optionalHandler = useServerFn(optionalServerFn)
+
+  optionalHandler().then((result) => {
+    result.ok
+  })
+
+  void optionalHandler()
+  void optionalHandler(undefined)
+}
diff --git a/packages/react-start/src/useServerFn.ts b/packages/react-start/src/useServerFn.ts
index 67a09a4358c..57e4a1a4278 100644
--- a/packages/react-start/src/useServerFn.ts
+++ b/packages/react-start/src/useServerFn.ts
@@ -1,13 +1,30 @@
 import * as React from 'react'
 import { isRedirect, useRouter } from '@tanstack/react-router'
 
+type AwaitedReturn<T extends (...args: Array<any>) => Promise<any>> = Awaited<
+  ReturnType<T>
+>
+
+type NonUndefined<T> = Exclude<T, undefined>
+
+type UseServerFnReturn<T extends (...args: Array<any>) => Promise<any>> =
+  Parameters<T> extends []
+    ? () => Promise<AwaitedReturn<T>>
+    : Parameters<T> extends [infer TVariables]
+      ? undefined extends TVariables
+        ? [NonUndefined<TVariables>] extends [never]
+          ? () => Promise<AwaitedReturn<T>>
+          : (variables?: NonUndefined<TVariables>) => Promise<AwaitedReturn<T>>
+        : (variables: TVariables) => Promise<AwaitedReturn<T>>
+      : (...args: Parameters<T>) => Promise<AwaitedReturn<T>>
+
 export function useServerFn<T extends (...deps: Array<any>) => Promise<any>>(
   serverFn: T,
-): (...args: Parameters<T>) => ReturnType<T> {
+): UseServerFnReturn<T> {
   const router = useRouter()
 
-  return React.useCallback(
-    async (...args: Array<any>) => {
+  const handler = React.useCallback(
+    async (...args: Parameters<T>) => {
       try {
         const res = await serverFn(...args)
 
@@ -15,16 +32,20 @@ export function useServerFn<T extends (...deps: Array<any>) => Promise<any>>(
           throw res
         }
 
-        return res
+        return res as AwaitedReturn<T>
       } catch (err) {
         if (isRedirect(err)) {
           err.options._fromLocation = router.state.location
-          return router.navigate(router.resolveRedirect(err).options)
+          return router.navigate(
+            router.resolveRedirect(err).options,
+          ) as AwaitedReturn<T>
         }
 
         throw err
       }
     },
     [router, serverFn],
-  ) as any
+  )
+
+  return handler as UseServerFnReturn<T>
 }
diff --git a/packages/solid-start/src/tests/useServerFnMutation.test-d.tsx b/packages/solid-start/src/tests/useServerFnMutation.test-d.tsx
new file mode 100644
index 00000000000..e0558eae176
--- /dev/null
+++ b/packages/solid-start/src/tests/useServerFnMutation.test-d.tsx
@@ -0,0 +1,33 @@
+import { createServerFn, useServerFn } from '../index'
+
+const serverFn = createServerFn({ method: 'POST' })
+  .inputValidator((input: { name: string }) => input)
+  .handler(async ({ data }) => ({
+    message: `Hello ${data.name}!`,
+  }))
+
+const optionalServerFn = createServerFn().handler(async () => ({
+  ok: true as const,
+}))
+
+export function UseServerFnRegressionComponent() {
+  const handler = useServerFn(serverFn)
+
+  handler({ data: { name: 'TanStack' } }).then((result) => {
+    result.message
+  })
+
+  void handler
+  return null
+}
+
+export function useOptionalServerFnRegressionHook() {
+  const handler = useServerFn(optionalServerFn)
+
+  handler().then((result) => {
+    result.ok
+  })
+
+  void handler()
+  void handler(undefined)
+}
diff --git a/packages/solid-start/src/useServerFn.ts b/packages/solid-start/src/useServerFn.ts
index b0949121b40..5a51da571ef 100644
--- a/packages/solid-start/src/useServerFn.ts
+++ b/packages/solid-start/src/useServerFn.ts
@@ -1,11 +1,28 @@
 import { isRedirect, useRouter } from '@tanstack/solid-router'
 
+type AwaitedReturn<T extends (...args: Array<any>) => Promise<any>> = Awaited<
+  ReturnType<T>
+>
+
+type NonUndefined<T> = Exclude<T, undefined>
+
+type UseServerFnReturn<T extends (...args: Array<any>) => Promise<any>> =
+  Parameters<T> extends []
+    ? () => Promise<AwaitedReturn<T>>
+    : Parameters<T> extends [infer TVariables]
+      ? undefined extends TVariables
+        ? [NonUndefined<TVariables>] extends [never]
+          ? () => Promise<AwaitedReturn<T>>
+          : (variables?: NonUndefined<TVariables>) => Promise<AwaitedReturn<T>>
+        : (variables: TVariables) => Promise<AwaitedReturn<T>>
+      : (...args: Parameters<T>) => Promise<AwaitedReturn<T>>
+
 export function useServerFn<T extends (...deps: Array<any>) => Promise<any>>(
   serverFn: T,
-): (...args: Parameters<T>) => ReturnType<T> {
+): UseServerFnReturn<T> {
   const router = useRouter()
 
-  return (async (...args: Array<any>) => {
+  const handler = async (...args: Parameters<T>) => {
     try {
       const res = await serverFn(...args)
 
@@ -13,14 +30,18 @@ export function useServerFn<T extends (...deps: Array<any>) => Promise<any>>(
         throw res
       }
 
-      return res
+      return res as AwaitedReturn<T>
     } catch (err) {
       if (isRedirect(err)) {
         err.options._fromLocation = router.state.location
-        return router.navigate(router.resolveRedirect(err).options)
+        return router.navigate(
+          router.resolveRedirect(err).options,
+        ) as AwaitedReturn<T>
       }
 
       throw err
     }
-  }) as any
+  }
+
+  return handler as UseServerFnReturn<T>
 }