next.js - Getting typescript error Type error: Type '() => Promise<{ message: string; } | undefined&gt

admin管理员组

文章数量:1299996

/component/button.tsx

"client component"

export const DeleteButton = ({ id }: { id: string }) => {
  const deleteImageWithId = deleteImage.bind(null, id);
  return (
    <form
      action={deleteImageWithId}
      className="py-3 text-sm bg-gray-50 rounded-br-md w-full hover:bg-gray-100 text-center"
    >
      <DeleteBtn />
    </form>
  );
};

/lib/actions.ts

"server component"

// Delete Image
export const deleteImage = async (id: string) => {
  const data = await getImageById(id);
  if (!data) return { message: "No data found" };

  await del(data.image);
  try {
    await prisma.upload.delete({
      where: { id },
    });
  } catch (error) {
    return { message: "Failed to delete data" };
  }

  revalidatePath("/");
};

Error message:

./components/button.tsx:44:7 Type error:
  Type '() => Promise<{ message: string; } | undefined>' is not assignable to type 'string | ((formData: FormData) => void | Promise<void>) | undefined'.
  Type '() => Promise<{ message: string; } | undefined>' is not assignable to type '(formData: FormData) => void | Promise<void>'.
  Type 'Promise<{ message: string; } | undefined>' is not assignable to type 'void | Promise<void>'.
  Type 'Promise<{ message: string; } | undefined>' is not assignable to type 'void | Promise<void>'.
  Type 'Promise<{ message: string; } | undefined>' is not assignable to type 'Promise<void>'.
  Type '{ message: string; } | undefined' is not assignable to type 'void'.
  Type '{ message: string; }' is not assignable to type 'void'.

/component/button.tsx

"client component"

export const DeleteButton = ({ id }: { id: string }) => {
  const deleteImageWithId = deleteImage.bind(null, id);
  return (
    <form
      action={deleteImageWithId}
      className="py-3 text-sm bg-gray-50 rounded-br-md w-full hover:bg-gray-100 text-center"
    >
      <DeleteBtn />
    </form>
  );
};

/lib/actions.ts

"server component"

// Delete Image
export const deleteImage = async (id: string) => {
  const data = await getImageById(id);
  if (!data) return { message: "No data found" };

  await del(data.image);
  try {
    await prisma.upload.delete({
      where: { id },
    });
  } catch (error) {
    return { message: "Failed to delete data" };
  }

  revalidatePath("/");
};

Error message:

./components/button.tsx:44:7 Type error:
  Type '() => Promise<{ message: string; } | undefined>' is not assignable to type 'string | ((formData: FormData) => void | Promise<void>) | undefined'.
  Type '() => Promise<{ message: string; } | undefined>' is not assignable to type '(formData: FormData) => void | Promise<void>'.
  Type 'Promise<{ message: string; } | undefined>' is not assignable to type 'void | Promise<void>'.
  Type 'Promise<{ message: string; } | undefined>' is not assignable to type 'void | Promise<void>'.
  Type 'Promise<{ message: string; } | undefined>' is not assignable to type 'Promise<void>'.
  Type '{ message: string; } | undefined' is not assignable to type 'void'.
  Type '{ message: string; }' is not assignable to type 'void'.

• typescript
• next.js
• promise
• prisma

Share Improve this question Follow edited Feb 11 at 15:15 Yakk - Adam Nevraumont 276k3030 gold badges354354 silver badges560560 bronze badges asked Feb 11 at 14:59 eko prameko pram 6544 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

() => Promise<{ message: string; } | undefined> is the type of deleteImageWithId, aka deleteImage.bind(null,id). You take no arguments () and return a promise of either an object containing a field message which is a string, or something undefined.

You are trying to put that object somewhere that expects an object of type string | ((formData: FormData) => void | Promise) | undefined.

This is probably action; as the action of a form, it is passed the form data. Your form is pretty empty.

Probably the easiest way to deal with this would be to create a lambda wrapper that takes a FormData and throws it away.

const deleteImageWithId = async (discard: FormData)=>{
  /* await maybe? */ deleteImage(id);
};

Something like that should fix up the type of deleteImageWithId so it matches one of the expected signatures of action.

Failing the above working, you may have to modify deleteImage to not return { message: "whatever" } that isn't being consumed by the code using it, or write a wrapper that uses that to do something.

本文标签：