Mi idea es hacer una página para ayudar a un amigo, pero tuve problemas con el firebase y firestore a la hora de guardar datos de un formulario. 
    La idea es una página de alquileres, que el pueda subir las publicaciones desde la página de admin y que estas al ser subidas se muestren en sus respectivas páginas.
    Hasta ahora es esto lo que he conseguido hacer con JavaScript y Firebase.
        
        
    
    
<code>JS</code> <code>CSS</code> <code>HTML</code>
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.9.0/firebase-app.js";
        import { getFirestore, addDoc, collection } from "https://www.gstatic.com/firebasejs/9.9.0/firebase-firestore.js";

        const firebaseConfig = {
          apiKey: "AIzaSyCmY8EnoBQzJ47554J1SmOBzmCUv1xUsQI",
          authDomain: "alquileres-santo.firebaseapp.com",
          projectId: "alquileres-santo",
          storageBucket: "alquileres-santo.appspot.com",
          messagingSenderId: "673241510521",
          appId: "1:673241510521:web:f5ed6085213680f7b79aa8"
        };

        const app = initializeApp(firebaseConfig);
        const db = getFirestore()

        const TipoPublicacion =  document.getElementById("type");
        const SubtipoPublicacion = document.getElementById("subtype");
        const TituloPublicacion = document.getElementById("title");
        const DescripcionPublicacion = document.getElementById("description");
        const ImagenesPublicacion = document.getElementById("image");
        const Publicar = document.getElementById("btnsave");

        let setData = await addDoc(collection(db, "publicacion"), {
          tipo: TipoPublicacion.value,
          subtipo: SubtipoPublicacion.value,
          titulo: TituloPublicacion.value,
          descripcion: DescripcionPublicacion.value,
          imagenes: ImagenesPublicacion.value
        });

    <!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    :root {
            --color-blanco: #FEF5ED;
            --color-negro: #000000;
            --color-oscuro: #333;
        }
          
        html {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
        }
          
        body {
            background: var(--color-blanco);
        }
          
        header {
            margin: -0.6%;
        }
          
        .logo-img {
            display: block;
            position: absolute;
            height: 45px;
            border-radius: 30px;
        }
          
        .navbar {
            height: 45px;
            background-color: var(--color-oscuro);
        }
          
        .navbar a {
            float: left;
            font-size: 16px;
            color: white;
            text-align: center;
            margin-left: 10rem;
            padding: 14px 16px;
            text-decoration: none;
        }
          
        .subnav {
            float: left;
            overflow: hidden;
        }
          
        .subnav .subnavbtn {
            font-size: 16px;
            border: none;
            outline: none;
            color: white;
            padding: 12px 16px;
            background-color: inherit;
            font-family: inherit;
            margin: 0;
            margin-left: 10rem;
        }
          
        .navbar a:hover, .subnav:hover .subnavbtn {
            background-color: blue;
        }
          
        .subnav-content {
            display: none;
            position: absolute;
            left: 0;
            background-color: var(--color-blanco);
            width: 100%;
            z-index: 1;
        }
          
        .subnav-content a {
            float: left;
            color: var(--color-negro);
            text-decoration: none;
        }
          
        .subnav-content a:hover {
            background-color: #eee;
            color: black;
        }
          
        .subnav:hover .subnav-content {
            display: block;
        }
          
        .agregar-container {
            text-align: center;
            margin-top: 5rem;
            margin-left: 25rem;
        }
          
        .send-form {
            display: flex;
            flex-direction: column;
            width: 50%;
        }
          
        .footer {
            position: inherit;
            margin: -0.6%;
            margin-top: 15%;
            background-color: var(--color-oscuro);
            color: var(--color-blanco);
            text-align: center;
            font-weight: 300;
            padding: 2rem 0;
            height: 7.5rem;
        }
          
        .footer__title {
            font-size: 2rem;
            margin-bottom: 2rem;
        }
          
        .footer__social {
            margin-bottom: 2rem;
        }
          
        .footer__icon {
            font-size: 1.5rem;
            color: var(--color-blanco);
            margin: 0 2rem;
        }
          
        .footer__copy {
            font-size: 10px;
        }

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html lang="es">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="../CSS/admin.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
            <link href='https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css' rel='stylesheet'>
            <title>Santo Tomé Casas</title>
        </head>
        <body>
            <header>
              <a href="../index.html"><img src="../IMG/Logo page.jpg" alt="logo" class="logo-img"></a>
                <div class="navbar">
                  <a href="./index.html">Inicio</a>
                  <div class="subnav">
                    <button class="subnavbtn">Alquileres <i class="fa fa-caret-down"></i></button>
                    <div class="subnav-content">
                      <a href="./HTML/alquiler-casa.html">Casa</a>
                      <a href="./HTML/alquiler-depto.html">Departamento</a>
                      <a href="./HTML/alquiler-bodega.html">Bodega-Galpón</a>
                      <a href="./HTML/alquiler-local.html">Local</a>
                    </div>
                  </div>
                  <div class="subnav">
                    <button class="subnavbtn">Ventas <i class="fa fa-caret-down"></i></button>
                    <div class="subnav-content">
                      <a href="./HTML/venta-casa.html">Casa</a>
                      <a href="./HTML/venta-depto.html">Departamento</a>
                      <a href="./HTML/venta-bodega.html">Bodega-Galpón</a>
                      <a href="./HTML/venta-local.html">Local</a>
                    </div>
                  </div>
                  <a href="./HTML/consulta.html">Consultas</a>
                  <a href="./HTML/login.html"><i class="fas fa-user"></i></a>
                </div>
            </header>

            <section class="agregar-container">
                <form id="sendForm" class="send-form">
                  <label>Ingrese la opción a publicar</label>
                  <select id="type">
                    <option>--Seleccione la opción--</option>
                    <option value="Alquiler">Alquiler</option>
                    <option value="Venta">Venta</option>
                  </select>
                  <label>Ingrese el tipo de publicación:</label>
                  <select id="subtype">
                    <option>--Selecciona el tipo de publicación--</option>
                    <option value="departamento">Departamento</option>
                    <option value="casa">Casa</option>
                    <option value="galpon">Bodega/Galpón</option>
                    <option value="local">Local</option>
                  </select>
                  <label>Titulo de la publicación:</label>
                  <input id="title" type="text" placeholder="Ingresa el titulo de tu publicación...">
                  <label>Descripción de la publicación:</label>
                  <textarea id="description" cols="30" rows="10" placeholder="Ingrese la descripción de la publicación..."></textarea>
                  <br>
                  <label>Ingrese las imagenes a subir:</label>
                  <input id="image" type="file">
                  <br>
                  <div class="btns">
                    <button id="btnsave">Publicar</button>
                    <input type="reset">
                  </div>
                </form>
            </section>

            <footer class="footer">
                <p class="footer__title">Santo Tomé Casas</p>
                <div class="footer__social">
                    <a href="#" class="footer__icon"><i class="bx bxl-facebook" ></i></a>
                    <a href="#" class="footer__icon"><i class="bx bxl-instagram" ></i></a>
                    <a href="#" class="footer__icon"><i class="bx bxl-telegram" ></i></a>
                </div>
            </footer>
        </body>
        <script type="module" src="../JS/admin.js"></script>
    </html>

<!-- end snippet -->

    
    <!-- language: lang-html -->
        <!DOCTYPE html>
        <html lang="es">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link rel="stylesheet" href="../CSS/admin.css">
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
                <link href='https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css' rel='stylesheet'>
                <title>Casas</title>
            </head>
            <body>
                <header>
                  <a href="../index.html"><img src="../IMG/Logo page.jpg" alt="logo" class="logo-img"></a>
                    <div class="navbar">
                      <a href="./index.html">Inicio</a>
                      <div class="subnav">
                        <button class="subnavbtn">Alquileres <i class="fa fa-caret-down"></i></button>
                        <div class="subnav-content">
                          <a href="./HTML/alquiler-casa.html">Casa</a>
                          <a href="./HTML/alquiler-depto.html">Departamento</a>
                          <a href="./HTML/alquiler-bodega.html">Bodega-Galpón</a>
                          <a href="./HTML/alquiler-local.html">Local</a>
                        </div>
                      </div>
                      <div class="subnav">
                        <button class="subnavbtn">Ventas <i class="fa fa-caret-down"></i></button>
                        <div class="subnav-content">
                          <a href="./HTML/venta-casa.html">Casa</a>
                          <a href="./HTML/venta-depto.html">Departamento</a>
                          <a href="./HTML/venta-bodega.html">Bodega-Galpón</a>
                          <a href="./HTML/venta-local.html">Local</a>
                        </div>
                      </div>
                      <a href="./HTML/consulta.html">Consultas</a>
                      <a href="./HTML/login.html"><i class="fas fa-user"></i></a>
                    </div>
                </header>
    
                <section class="agregar-container">
                    <form id="sendForm" class="send-form">
                      <label>Ingrese la opción a publicar</label>
                      <select id="type">
                        <option>--Seleccione la opción--</option>
                        <option value="Alquiler">Alquiler</option>
                        <option value="Venta">Venta</option>
                      </select>
                      <label>Ingrese el tipo de publicación:</label>
                      <select id="subtype">
                        <option>--Selecciona el tipo de publicación--</option>
                        <option value="departamento">Departamento</option>
                        <option value="casa">Casa</option>
                        <option value="galpon">Bodega/Galpón</option>
                        <option value="local">Local</option>
                      </select>
                      <label>Titulo de la publicación:</label>
                      <input id="title" type="text" placeholder="Ingresa el titulo de tu publicación...">
                      <label>Descripción de la publicación:</label>
                      <textarea id="description" cols="30" rows="10" placeholder="Ingrese la descripción de la publicación..."></textarea>
                      <br>
                      <label>Ingrese las imagenes a subir:</label>
                      <input id="image" type="file">
                      <br>
                      <div class="btns">
                        <button id="btnsave">Publicar</button>
                        <input type="reset">
                      </div>
                    </form>
                </section>
    
                <footer class="footer">
                    <p class="footer__title">Casas</p>
                    <div class="footer__social">
                        <a href="#" class="footer__icon"><i class="bx bxl-facebook" ></i></a>
                        <a href="#" class="footer__icon"><i class="bx bxl-instagram" ></i></a>
                        <a href="#" class="footer__icon"><i class="bx bxl-telegram" ></i></a>
                    </div>
                </footer>
            </body>
            <script type="module" src="../JS/admin.js"></script>
        </html>
    
    <!-- end snippet -->
    
La imagen es el firestore, cuando intento guardar los datos de los input, el textarea y la imagen, los guarda vacios y no se por que.
Por favor ayuda!!


   https://i.sstatic.net/Ucfwr.png