Error in TypeScript

[nachoaldamav]

When i was doing the Course i found an error that prevented to upload the project to Vercel, the error itself did not cause any problem to the website, it was just that TypeScript complained.

The Error was 'Argument of type 'string | string[]' is not assignable to parameter of type 'string'. Type 'string[]' is not assignable to type 'string'.'

The string is the slug, and to fix it you need to convert the slug to a string (I'm fairly new to programming, but wasn't the slug a string already?)

anyway, you have to make the slug a string, with let StringSlug = (slug as string) and replace .doc(slug); to .doc(StringSlug);

function PostManager() {
  const [preview, setPreview] = useState(false);

  const router = useRouter();
  const { slug } = router.query;

  let StringSlug = (slug as string)

  const postRef = firestore.collection('users').doc(auth.currentUser.uid).collection('posts').doc(StringSlug);
  const [post] = useDocumentData(postRef);

/pages/admin/[slug].tsx

[Mawulijo]

Also, in the form, I had to do

        <textarea {...register("content")}></textarea>
        <fieldset>
          <input className={styles.checkbox}  type="checkbox" {...register("published")} />
          <label>Published</label>
        </fieldset>

to avoid getting Type 'UseFormRegister<any>' is not assignable to type 'LegacyRef<HTMLTextAreaElement>'. error for the textarea tag
and Type 'UseFormRegister<any>' is not assignable to type 'LegacyRef<HTMLInputElement>'.
error for the input tag

[Mawulijo]

And for validations do

       <textarea name="content" {...register("content",{
            maxLength : { value: 20000, message: 'content is too long' },
            minLength: { value: 10, message: 'content is too short' },
            required: { value: true, message: 'content is required'}
          })}>
        </textarea>

and also had to import formState twice to get isValid and isDirty states working
const { register, handleSubmit, reset, watch, formState: {errors}, formState } = useForm({ defaultValues, mode: 'onChange' });
Feels hacky and nonesense. Should have just used .js instead of .tsx extentions

[nachoaldamav]

Also for <PostList /> I think in TS it retrieves an error about "Admin mode", i didn't find a way to fix it, now i switched to JS

[Mawulijo]

Had the same issue. I used JS for the files consuming the PostFeed component

[Ciph3rzer0]

Had the same issue. I used JS for the files consuming the PostFeed component

There's no reason to switch to JS. If you ever find yourself in a situation where Typescript is complaining, just put //@ts-ignore on the line above it. However, figuring out why TS is complaining is usually an worthwhile exercise. As OP mentioned you can just cast the type if you know that it will be a string.

[nachoaldamav]

I've tried that, but I don't know why it didn't work.

• Update
  Nevermind, I've put it in the 1st line only 😅